react-native - 在 subview 中水平滚动时，如何防止父 Flatlist 的垂直滚动？

Question

我有一个垂直滚动的平面列表，在平面列表的每个项目中，我都有一个来自 react-native-swipe-list-view 的 SwipeListView。

每当我在 SwipeListView 内水平滑动时，如果我也开始垂直滚动然后它开始垂直滚动 Flatlist，它就会被取消。我尝试使用 useState 来管理 scrollEnabled 但这仅在用户在 SwipeListView 内缓慢滑动时才有效。随着速度的增加，动画会变得困惑。我也觉得必须有一种更清洁的方法来实现这一目标。有人知道在子组件内部滚动时基本上禁用 FlatList 滚动的方法吗？

Answer 1

对于初学者，将 react-native-swipe-list-view 替换为 the swipable component that react native gesture handler exports .因为它使用 UI 线程来执行所有动画，所以它的性能要高得多。然后，您也可以从 react-native-gesture-handler 导入 Flatlist。

一般来说，事情应该按原样进行。但是，如果有任何故障行为，您可以使用 gestureHandlerRootView 包装 flatlist，并将 RNGH ScrollView 传递给 flatlist renderScrollComponent。

import Swipeable from 'react-native-gesture-handler/Swipeable';
import {Flatlist} from 'react-native-gesture-handler'

import {
  GestureHandlerRootView,
   PanGestureHandler,
   ScrollView,
 } from 'react-native-gesture-handler';

export default function App(){
   <GestureHandlerRootView>

      <Flatlist renderItem={<Swipeable />}
                 renderScrollComponent={ScrollView}/>
     
    </GestureHandlerRootView>
      
}