ReactNative 吸顶 FlatList 白屏

项目中使用FlatList来实现“吸顶”的效果,默认是第二行吸顶,故设置了stickyHeaderIndices属性

现象

在列表中添加一条数据,突然整个列表不显示了

原因

之前将stickyHeaderIndices写在state里了,其实不需要。。。

// Dva Model中effects的逻辑
let stickyHeaderIndices = [1];
if (!comments || comments.length <= 1) {
    stickyHeaderIndices = []; // error code
}
const {comments, stickyHeaderIndices} = this.props;

<FlatList
  ref={o => (this._list = o)}
  data={comments}
  ItemSeparatorComponent={this._separator}
  onEndReachedThreshold={0.01}
  onEndReached={this.onEndReached}
  ListHeaderComponent={this.renderDetail}
  renderItem={this.renderComments}
  ListFooterComponent={this.renderListFooter}
  keyExtractor={item => 'cmt_' + item.comment_id}
  stickyHeaderIndices={stickyHeaderIndices}
/>

当stickyHeaderIndices从[] 变成 [1],整个FlatList就不显示了.... (为找到这个问题,将代码注到最少,来测试重现,直到注掉stickyHeaderIndices发现正常了)

解决

第二行吸顶,直接设置 stickyHeaderIndices={[1]} 即可。

<FlatList
  ref={o => (this._list = o)}
  data={comments}
  ItemSeparatorComponent={this._separator}
  onEndReachedThreshold={0.01}
  onEndReached={this.onEndReached}
  ListHeaderComponent={this.renderDetail}
  renderItem={this.renderComments}
  ListFooterComponent={this.renderListFooter}
  keyExtractor={item => 'cmt_' + item.comment_id}
  stickyHeaderIndices={[1]}
/>

解决方法很简单,但找出为什么突然白屏还是有点意思,记录一下...


参考

https://docs.nativebase.io/docs/examples/FlatListExample.html