react-native - FlatList 在 Android 上的 BottomSheet 中不起作用

Question

我正在使用 gorhom/react-native-bottom-sheet

我遇到的问题:

我在 BottomSheet 中有一个 FlatList，我可以在 ios 上的 FlaLlist 中滚动，但它不适用于 android。

Answer 1

经过大量研究，我能够通过使用 BottomSheetFlatList 而不是同一包中的 FlatList 来解决问题。

import { BottomSheetFlatList } from "@gorhom/bottom-sheet";

<BottomSheetFlatList
        ref={ref}
        initialNumToRender={3}
        keyExtractor={(item) => item?.id}
        showsVerticalScrollIndicator={false}
        maxToRenderPerBatch={3}
        windowSize={7}
        data={dat}
        renderItem={renderItem}
      />

通过这样做，它也开始在 android 上正常工作。

但因为我也希望我的 Flatlist 在特定事件上使用 ref 自动滚动。

经过一些研究并且由于 @gorhom/bottom-sheet 的出色文档。我在文档的故障排除部分找到了解决方案。

但作为一名开发人员，StackOverflow 是我们解决每个问题的第一站。所以，我决定在这里发布答案。

回答

由于使用 TapGestureHandler 和 PanGestureHandler 包装内容和句柄，任何手势交互都不会按预期运行。

要解决此问题，请使用 react-native-gesture-handler 提供的 ScrollView 和 FlatList，而不是 react-native。

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

在这里找到原始答案- https://gorhom.github.io/react-native-bottom-sheet/troubleshooting