React Native系列 - ListView白板workaround

By zhiyong

发表于 2017-01-10

欢迎转载，请支持原创，保留原文链接:blog.ilibrary.me

问题

React Native 在数据量大的情况下刷新列表的时候会出现白板，网上有很多讨论(react-native/issues/1831)，但是没有很好的解决办法。

原因

还没有仔细看底层代码，具体原因未知。只知道用手划一下ListView白板就会消失。在monitor里面看白板是真白板了，没有任何子元素, 但是datasource里面是有数据的。

#解决办法 每次刷新datasource的时候强制改变一下ListView的paddingTop(你也可以改其它属性，比如margin，border，backgroundcolor等)，强制刷新一下ListView. 样例代码如下:

注意，也有可能出现抖动都无法解决问题的情况，这种情况下请加上removeClippedSubviews={false}

constructor(){
  ...  
  this.refreshIndex = 0; // 初始化
}

render(){
  this.refreshIndex = this.refreshIndex + 1;// 在绘制前递增一下计数器
  padding = { paddingTop: this.refreshIndex % 2} // 每次取余，让padding在1和2之间抖动
  return (
    <ListView
    removeClippedSubviews={false}
    style={padding} 
    ...
    />)
  }