加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

希望能帮助到你.

(编辑:李大同)

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

    推荐文章
      热点阅读