手势处理程序不适用于 BottomSheet答案

【问题标题】：Gesture handler not working on BottomSheet手势处理程序不适用于 BottomSheet
【发布时间】：2022-11-21 18:17:33
【问题描述】：

我正在尝试在 expo 中使用 gorhom bottomsheet，我按照安装说明执行 expo install react-native-reanimated react-native-gesture-handler 和 yarn add @gorhom/bottom-sheet@^4。在我的代码中，设法让底页显示出来，但向上滑动时它并没有移动。

代码.js

import { View, Text } from "react-native";
import React, { useRef } from "react";
import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";

const LandScreen = () => {
  const bottomSheetRef = useRef(null);
  return (
    <View className="bg-red-200 flex-1">
      <BottomSheet ref={bottomSheetRef} snapPoints={["13%", "95%"]}>
        <BottomSheetView>
          <Text>Hello</Text>
        </BottomSheetView>
      </BottomSheet>
    </View>
  );
};

export default LandScreen;

【问题讨论】：

标签： javascript react-native expo bottom-sheet

【解决方案1】：

React 本机手势处理程序需要一些额外的步骤才能在某些设备上正常工作。根据文档，它说我们需要用<GestureHandlerRootView> 或gestureHandlerRootHOC 包装入口点。

<GestureHandlerRootView className="bg-red-200 flex-1">
      <BottomSheet ref={bottomSheetRef} snapPoints={["13%", "95%"]}>
        <BottomSheetView>
          <Text>Hello</Text>
        </BottomSheetView>
      </BottomSheet>
</GestureHandlerRootView>

【讨论】：