Android 上的 FlatList 在 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 能够 auto-scroll 在特定事件上使用 ref。

经过一些研究和 @gorhom/bottom-sheet 的大量文档。我在文档的故障排除部分找到了解决方案。

但作为开发人员，Whosebug 是我们每个问题的第一个 go-to 位置。所以，我决定post这里的答案。

回答

由于使用 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

Answer 2

使用raw-bottom-sheet raw-bottom-sheet并将“dragFromTopOnly”设置为true，可以执行任何触摸操作我会提到下面的示例：

 <RBSheet
        ref={refRBSheet}
        dragFromTopOnly={true}
        customStyles={{
          wrapper: {
            backgroundColor: "transparent"
          },
          draggableIcon: {
            backgroundColor: "#000"
          }
        }}
      >`

Android 上的 FlatList 在 BottomSheet 中不工作

FlatList not working inside BottomSheet on Android

react-native

bottom-sheet

react-native-flatlist