Используя выгруженный FlatList, как изменить событие на видимой странице? - PullRequest
Новая
       4

Используя выгруженный FlatList, как изменить событие на видимой странице?

0 голосов
/ 28 марта 2019

Я создаю простой горизонтальный собственный список React Native FlatList с включенной подкачкой страниц: 

<FlatList
   horizontal={true}
   pagingEnabled={true}
   data={...some data...}
   renderItem={({item}) => {...some rendering...}}
   onViewableItemsChanged={(info) => {... handling ...}}
 />

Я хотел бы, чтобы мне перезванивали только после того, как новая страница в списке стала видимой.Требуемое поведение заключается в том, что, когда пользователь проводит пальцем по списку влево и вправо, список будет пролистывать элементы, и я хочу, чтобы обратный вызов срабатывал один раз с видимыми элементами.

onViewableItemsChanged реквизитвызывается при каждом изменении видимых элементов, что не является тем, что я ищу, если я не отслеживаю, к какой странице принадлежат элементы.

Я ищу тип обратного вызова onViewablePageChanged.

Есть идеи, как этого добиться?

Ответы [ 2 ]

1 голос
/ 29 марта 2019

Решением, которое я использовал, было отслеживание видимых элементов по общему списку элементов для определения количества видимых элементов на странице.

При использовании pagingEnabled в списке будут отображаться только страницы.Однако onViewableItemsChanged отзывается при каждом изменении видимых элементов.Сравнивая просматриваемые элементы снова со списком элементов, можно определить, на какой «странице» находится FlatList.

Для этого необходимо знать, сколько элементов может отображаться в представлении.Либо рассчитывается на основе макета, либо задается при рендеринге View и FlatList.

Вот пример: 

onViewableItemsChanged = ({viewableItems}) => {

  // Get the first viewable item
  const firstViewableItem = viewableItems[0].key;

  // Get its index into the items
  const index = this.state.items.findIndex(item => item.key === firstViewableItem);

  // If the index is a multiple of the number of items displayable on the screen
  // by checking for a reminder on the modulo operation
  if ((index % NB_ITEMS_SCREEN) === 0) {

    // get page
    const currentPage = index / NB_ITEMS_SCREEN;
    if (currentPage !== this.state.currentPage) {
      // Do something and update currentPage in this.state
    }
  }
}

<FlatList
   data={this.state.items}
   horizontal={true}
   pagingEnabled={true}
   renderItem={({ item }) => <Text>{item.key}</Text>}
   onViewableItemsChanged={this.onViewableItemsChanged}
/>

См. Эту закуску

https://snack.expo.io/@visto9259/flatlist-onviewableitemschanged-example

0 голосов
/ 29 марта 2019

Вы можете достичь видимых предметов с помощью кода ниже. Попробуйте это. 

//Method to invoke when item change
onViewableItemsChanged = ({ viewableItems, changed }) => {
      console.log("Visible items are", viewableItems);
      console.log("Changed in this iteration", changed);
   }

render () => {
    return (
    ...
    <FlatList
        horizontal={true}
        pagingEnabled={true}
        data={...some data...}
        renderItem={({item}) => {...some rendering...}}
        onViewableItemsChanged={this.onViewableItemsChanged }
        viewabilityConfig={{
          itemVisiblePercentThreshold: 50
        }}
     /> 
    ....
   )}
...