Можно ли обнаружить первый и последний элемент в FlatList - PullRequest
Новая
       15

Можно ли обнаружить первый и последний элемент в FlatList

1 голос
/ 08 апреля 2020

Я хочу обнаружить первый и последний элементы рендеринга на экране.

Я думаю, что должен использовать onViewableItemsChanged, но я не знал, как его использовать.

например: здесь первое: (1) и последний: (8)

enter image description here

после прокрутки, здесь первый: ( 7) и последний - (14)

enter image description here

Вот мой код: 

const DAYS = [
  1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
   19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30
]

const App = () => {

  const onViewRef = useRef((viewableItems) => {
    console.log(viewableItems.changed)
  })

  const viewConfigRef = useRef({ viewAreaCoveragePercentThreshold: 50 })

  return (
    <View style={styles.screen}>
      <FlatList
        data={DAYS}
        keyExtractor={(item, index) => index.toString()}
        onViewableItemsChanged={onViewRef.current}
        viewabilityConfig={viewConfigRef.current}
        renderItem={({ item }) =>
          <View style={styles.textContainer}>
            <Text style={styles.text}>{item}</Text>
          </View>}
      />
    </View>
  )
}

1 Ответ

5 голосов
/ 08 апреля 2020

Определите ref для хранения доступных элементов на экране, как показано ниже: 

const onScreenItems = useRef([]);

Затем измените значение ViewRef следующим образом: 

const onViewRef = useRef((viewableItems) => {

    viewableItems.changed.forEach(item => {
      const isExist = onScreenItems.current.map((current) => { return current.index; }).indexOf(item.index) !== -1;

      if (item.isViewable && !isExist) {
        onScreenItems.current.push(item)
      }

      if (!item.isViewable && isExist) {
        const findIndex = onScreenItems.current.findIndex(current => current.index === item.index);
        onScreenItems.current.splice(findIndex, 1)
      }

   });

})

ПРИМЕЧАНИЕ : при каждом прокрутке FlatList onScreenItems будет обновляться

для получения первого и последнего элемента : 

 const getFirstItem = () => {
   return  Math.min.apply(null, onScreenItems.current.map(item => item.item));
 }

 const getLastItem = () => {
   return  Math.max.apply(null, onScreenItems.current.map(item => item.item));
 }

Поместите две кнопки на экране, чтобы получить первый и последний элемент: 

<Button title="Get The First Item" onPress={()=> {
    alert(getFirstItem())
}} />

<Button title="Get The Last Item" onPress={()=> {
    alert(getLastItem())
}} />
...