項目中使用FlatList來實現(xiàn)“吸頂”的效果，默認(rèn)是第二行吸頂，故設(shè)置了stickyHeaderIndices屬性

現(xiàn)象

在列表中添加一條數(shù)據(jù)，突然整個列表不顯示了

原因

之前將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}
/>

當(dāng)stickyHeaderIndices從[] 變成 [1]，整個FlatList就不顯示了.... （為找到這個問題，將代碼注到最少，來測試重現(xiàn)，直到注掉stickyHeaderIndices發(fā)現(xiàn)正常了）

解決

第二行吸頂，直接設(shè)置 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