项目中使用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