react-native – 使用Redux存储更新FlatList的最佳方法

发布时间：2020-12-15 05:04:25 所属栏目：百科来源：网络整理

导读：我有一个带有嵌套对象的Redux商店： Part of the Redux store 我正在使用数组的第一个元素作为我的FlatList的数据,因为我不想一次显示所有项目. 但是,如果我想添加数组的第二个元素并更新列表.什么是最好的解决方案？将数据值设置为状态道具,您可以使用onEn

我有一个带有嵌套对象的Redux商店： Part of the Redux store

我正在使用数组的第一个元素作为我的FlatList的数据,因为我不想一次显示所有项目.

但是,如果我想添加数组的第二个元素并更新列表.什么是最好的解决方案？

将数据值设置为状态道具,您可以使用onEndReachedThreshold设置从希望触发onEndReached的底部滚动距离.然后调用你的函数在onEndReached上加载更多项,然后你的FlatList将被更新.

它看起来像这样：

<FlatList
  data={this.state.listDataSource}
  renderItem={({ item,index }) => this.renderListItem(item,index)}
  keyExtractor={this._keyExtractor} // dont'forget to declare _keyExtractor
  onEndReachedThreshold={0.5} //when scroll reach half distance from bottom. Min value 0,max 1.
  onEndReached={() => this.loadMoreItems()} // this.setState({ listDataSource: newList }),for instance
/>

在上面的示例中,每次滚动到达列表的一半时,它将触发onEndReached函数.

如果您不想使用组件状态,还可以触发操作(this.props.loadMoreItems()),更新reducer并将其值用作数据(this.props.listDataSource).

您可以在官方文档中找到更多详细信息：https://facebook.github.io/react-native/docs/flatlist.html

希望能帮助到你.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!