React Native FlatList无法在Android上的BottomSheet中工作

3pmvbmvn  于 2023-08-07  发布在  React
关注(0)|答案(3)|浏览(156)

我用gorhom/react-native-bottom-sheet
我面临的问题:
我有一个FlatList内的BottomSheet,我能够滚动在FlaLlist在ios上,但它不是在android上工作。

mqkwyuun

mqkwyuun1#

经过大量的研究,我能够通过使用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 Package 了内容和句柄,因此任何手势交互都无法按预期运行。
要解决此问题,请使用react-native-gesture-handler provide中的ScrollView & FlatList,而不是react-native。

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


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

mwngjboj

mwngjboj2#

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

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

字符串

qacovj5a

qacovj5a3#

我也遇到了同样的问题,这就是我如何解决这个问题。
从代码中删除此导入

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

字符串
添加此代码或使用此导入

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

相关问题