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

Question

我有水平设置的平面列表 来自数组的 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}
      />

我们将不胜感激。

Answer 1

基本上，实现onScroll 用法是当您希望在实际滚动与滚动位置相关时引起注意（例如胺类）。当您希望在用户到达或即将到达FlatList 末尾时收到通知。

您应该实现onEndReached 和onEndReachedThreshold 以在用户达到阈值时处理更好的用户体验。

您从源（服务器或任何来源）获取的新数据应连接到现有的this.props.data

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

这个 SO 回答 - React Native Infinite Scroll

我的解决方案是分页，因为无限滚动是分页的私人案例，它是完全相同的方法。

Answer 2

如果你想要image 或video 列表 另一种比较简单的方法是使用react-native-snap-carousel

<Carousel
      ref={ (c) => { this._carousel = c; } }
      data={this.state.data}
      renderItem={this._renderItem.bind(this)}
      onSnapToItem={this.handleSnapToItem.bind(this)}
      sliderWidth={360}
      itemWidth={256}
      layout={'default'}
      firstItem={0}
      itemHeight={20}
      sliderHeight={20}
      loop
      vertical
      loopClonesPerSide={100}
    />

示例： https://snack.expo.io/@kurtesy/react-native-snap-carousel-example

Answer 3

您可以使用Flatlist 的onEndReached 方法实现此目的。

这就是答案背后的想法。

    state = {
      data: []   //your initial data
    }


    <Flatlist
     {…this.props}
     extraData={this.state}
     onEndReached = {() => {
     this.setState((prevState) =>{
        data: […prevState,this.state.data]
     )}}
    />