FlatList 在 Android 上无法在 BottomSheet 内工作

Question

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

我面临的问题：

我有一个FlatListinside a BottomSheet，我可以FlaLlist在 ios 上滚动，但在 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