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