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

您可以使用onEndReached的{{1}}方法来实现此目的。

这是答案背后的想法。

Flatlist

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

3 个答案: