在滚动组合上反应本机 FlatList

Question

我有一个 FlatList，它工作正常...

    <FlatList ...
     onScroll={
        Animated.event(
        [{ nativeEvent: { contentOffset: { x: scrollX } } }],
        {
          useNativeDriver: false,
        }
        )
      }

现在我想将上面的内容与活动的 onScroll 索引结合起来...

    <FlatList ...
      onScroll={onScroll}

...

  const onScroll = useCallback(
    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
      const slideSize = event.nativeEvent.layoutMeasurement.width;
      const index = event.nativeEvent.contentOffset.x / slideSize;
      const roundIndex = Math.round(index);
      console.log('roundIndex:', roundIndex);

      //how to combine the below?
      Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], {
        useNativeDriver: false,
      });
    },
    []
  );

Answer 1

使用flatlist的OnEndReached功能。

如果您在 Flatlist 中使用 onScroll，那么有时它不适用于 android，但对于 iOS 它有效。

在滚动组合上反应本机 FlatList

react native FlatList on scroll combined

onscroll

react-native