React Native FlatList 与 Horizontal ScrollView 中的无限滚动问题

Question

我正在开发一个 React Native 应用程序，其中有两个水平滚动的 FlatList 组件包裹在 ScrollView 中。我正在尝试实现无限滚动，但我遇到了初始滚动行为的问题。

当用户第一次尝试向左滚动时，除非用户向右滚动，否则滚动不起作用。一旦我向右滚动，然后尝试向左滚动，它就会按预期工作。但是，在第一次向左滚动尝试时，此问题仍然存在。

以下是我的实施的简要概述：

1. 我有两个水平显示数据的 FlatList 组件。

2. FlatList 的滚动是动画的，我怀疑它可能会干扰手动滚动行为。

我怀疑这与动画和滚动事件的处理方式有关，但我无法确定问题所在。有没有人经历过类似的事情或对如何解决这个问题有任何建议？

const handleScrollBegin = () => {
    if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
    }
    isScrolling.current = true;
    scrollX.stopAnimation();
};

const handleScrollEnd = () => {
    timeoutRef.current = setTimeout(() => {
        isScrolling.current = false;
        animateItems(currentScrollPosition.current).start();
    }, 2000);
};

// ScrollView with Animated.FlatLists
<ScrollView
    horizontal
    onScrollBeginDrag={handleScrollBegin}
    onScrollEndDrag={handleScrollEnd}
    onScroll={handleScroll}
    scrollEventThrottle={16}
>

        <View style={styles.container}>
          <Animated.FlatList
            data={data}
            renderItem={renderRow}
            keyExtractor={(item) => item}
            horizontal
            showsHorizontalScrollIndicator={false}
            contentContainerStyle={styles.row}
            scrollEnabled={false}
            style={{
              transform: [
                {
                  translateX: scrollX.interpolate({
                    inputRange: [0, width],
                    outputRange: [0, -width],
                  }),
                },
              ],
            }}
          />
         [A second Animated.Flatlist]

        </View>
</ScrollView>

Answer 1

尝试使用react-native-reanimated-carousel代替 参考：https://www.npmjs.com/package/react-native-reanimated-carousel