react-native - 是否有禁用父滚动的最佳方法

Question

我试图在子组件中向上/向下滚动时禁用父滚动（子组件是水平的FlatList）。有没有最优的方法？

   <ScrollView scrollEnabled={scrollEnabled}>
    <Header />
    <FlatList
      horizontal={true}
      data={cards}
      renderItem={() => (
        <Pressable onPressIn={() => setScrollEnabled(false)} onPressOut={() => setScrollEnabled(true)}>
          <ScrollingCard />
        </Pressable>
      )}
      keyExtractor={(item) => item.toString()}
    />
    {cards.map((item) => <ScrollingCard key={`vertical-${item}`} item={item} type="Vertical" />)}
  </ScrollView>

Answer 1

声明一个状态：-

const [data, setData] = useState({
    username: "Mark White",
    enableScrollViewScroll: true
})

滚动时的处理状态：-

const onEnableScroll = (value) => {
    setData({
        ...data,
        enableScrollViewScroll: value
    })
}

内部组件：-

         <ScrollView
            showsVerticalScrollIndicator={false}
            scrollEnabled={data.enableScrollViewScroll}>
           <View>
                <FlatList
                    onTouchStart={() => {
                        onEnableScroll(false);
                    }}
                    onMomentumScrollEnd={() => {
                        onEnableScroll(true);
                    }}
                  ...
                />
            </View>
         </ScrollView>