React Native - Reanimated Bottom Sheet：Snapable Container 中的内容只能在 iOS 上滚动

Posted 2023-03-13

【中文标题】React Native - Reanimated Bottom Sheet：Snapable Container 中的内容只能在 iOS 上滚动

【英文标题】：React Native - Reanimated Bottom Sheet: Content in Snapable Container only scrollable on iOS

【发布时间】：2020-11-07 03:00:57

【问题描述】：

我有一个带有 3 个捕捉点的容器，其中还包含一个滚动视图，用于显示更多信息。出于某种原因，此滚动视图仅适用于 ios，不适用于 android。但是，在 Android 上，当我在屏幕上进行一种垂直捏合以缩放移动时，滚动就会起作用。在 iOS 上，一切都可以无缝运行。

这里是 reanimated-bottom-sheet 的 repo： https://github.com/osdnk/react-native-reanimated-bottom-sheet

我已经尝试过使用 Bottom Sheet 库的存储库页面上提供的道具，并尝试使用其他 *** 问题中提到的这些道具，遗憾的是这些道具对我没有帮助。在 Android 上，只有滚动起作用或捕捉点。永远不要两个（只有两个手指捏）。

Can't scroll Flatlist inside react-native-reanimated-bottom-sheet

enabledInnerScrolling=true
enabledContentGestureInteraction=false

非常感谢您的帮助，因为这是我们 WebDev 课程的最后一个项目，我们没有太多时间了 >.

  const bs = React.createRef();

  return (
    <View style=styles.container>
      <BottomSheet
        ref=bs
        snapPoints=['85%', '39%', '17%']
        initialSnap=1
        renderContent=renderContent
        enabledInnerScrolling=true
      />
      <TouchableWithoutFeedback onPress=() => bs.current.snapTo(0)>
        <Image
          style=styles.background
          source=require('../assets/images/TEST-flower-02.jpg')
        />
      </TouchableWithoutFeedback>
    </View>
  );
```

【问题讨论】：

你可以试试github.com/rgommezz/react-native-scroll-bottom-sheet，它的设计考虑到了可滚动的内容

【参考方案1】：

您可以尝试使用react-native-gesture-handler 中的FlatList 组件代替 在react-native 中导出的默认FlatList 模块。 这应该让你的 scrollView 在 Android 上工作

import  FlatList  from "react-native-gesture-handler";

...
const renderContent = () => (
  <FlatList
    data=DATA
    renderItem=renderItem
  />);

【参考方案2】：

你也可以import ScrollView from "react-native-gesture-handler".它对我有用