Как сделать прокрутку плоского списка бесконечно в React Native с конечным количеством данных в массиве - PullRequest
Новая
       6

Как сделать прокрутку плоского списка бесконечно в React Native с конечным количеством данных в массиве

6 голосов
/ 10 февраля 2020

У меня есть плоский список по горизонтали с данными из 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}
      />

Любая помощь будет высоко оценена.

Ответы [ 3 ]

2 голосов
/ 10 февраля 2020

По сути, реализация onScroll используется, когда вы хотите, чтобы вас заметили, когда фактическая прокрутка связана с положением прокрутки (например, аминированием). Когда вы хотите получать уведомление, когда пользователь достигает или собирается достичь, до конца FlatList.

Вы должны реализовать onEndReached и onEndReachedThreshold, чтобы обеспечить лучшее взаимодействие с пользователем, когда пользователь достигает порога.

Новые данные, которые вы получаете от источника (сервера или независимо от того, откуда), должны быть объединены с существующим this.props.data

См. хороший пост в блоге - https://scotch.io/tutorials/implementing-an-infinite-scroll-list-in-react-native

И этот SO отвечает - Реагирует на собственную бесконечную прокрутку

Мое решение относится к нумерации страниц, потому что бесконечная прокрутка - это частный случай нумерации страниц, это точно такой же подход.

0 голосов
/ 10 февраля 2020

Если вы хотите image или video список Еще один подход, который является хакерским и простым, использует реагировать-родной-snap-карусель 

<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 / response-native-snap-carousel-example

0 голосов
/ 10 февраля 2020

Вы можете достичь этого, используя onEndReached метод Flatlist.

. Это идея ответа. 

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


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