如何使用有限的数组在React Native中使平面列表无限滚动

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用有限的数组在React Native中使平面列表无限滚动相关的知识,希望对你有一定的参考价值。

我有水平排列的平面列表带有来自数组的11个项目的数据,它是固定且永不更改

我想要的是,当用户在滚动时到达平面列表的末尾时,数据应该保持不变,但第一项应该最后出现,依此类推

这是我到目前为止尝试过的

  <FlatList
        {...this.props}
        ref={ref => {
          this.infListRef = ref;
        }}
        data={this.props.data}
        onScrollEndDrag={this.handleScroll}
        initialScrollIndex={0}
        scrollEventThrottle={16}
        renderItem={this.props.renderItem}
        onScroll={({nativeEvent}) => this.checkScroll(nativeEvent)}
        horizontal
        showsHorizontalScrollIndicator={false}
        keyExtractor={item => item.id}
      />

任何帮助将不胜感激。

答案
您应该实现onEndReachedonEndReachedThreshold以在用户达到阈值时处理更好的用户体验。

您将从源(服务器或无论来自何处)获取的新数据连接到现有的this.props.data

查看优秀博客文章-https://scotch.io/tutorials/implementing-an-infinite-scroll-list-in-react-native

这个答案-React Native Infinite Scroll

以上是关于如何使用有限的数组在React Native中使平面列表无限滚动的主要内容,如果未能解决你的问题,请参考以下文章

如何在 React Native 中使 Tab.Navigation Screens 默认背景为白色?

如何在 react-native 中使文本的某些部分可点击并且某些部分具有不同的文本颜色

如何在 React Native 中使 2 个 <Text> 内联

React Native Facebook 登录按钮在 iOS 模拟器中使应用程序崩溃

react native - 如何在元组数组中使用 React Hooks?

如何在 React Native 中使用数组对象迭代数组