React Native中@gorhom/bottom-sheet弹窗报错：PanGestureHandler需为GestureHandlerRootView后代

核心问题分析 #

1. 初始错误 PanGestureHandler must be used as a descendant of GestureHandlerRootView：因为GestureHandlerRootView没有作为整个应用的根容器，导致手势组件无法识别上下文。
2. 后续错误 Argument appears to not be a ReactComponent：手动嵌套PanGestureHandler属于多余操作，BottomSheetModal内部已封装所需手势逻辑，外部嵌套会引发组件类型冲突。

解决方案步骤 #

1. 修正GestureHandlerRootView的位置 #

将GestureHandlerRootView移至App的最顶层，包裹整个应用，确保所有手势组件都能获取正确上下文。修改后的APP.JS代码如下：

// 注意：必须将这个导入放在文件最顶部
import 'react-native-gesture-handler';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
// 其他必要导入...

return (
  <GestureHandlerRootView style={{ flex: 1 }}>
    <BottomSheetModalProvider>
      <NavigationContainer>
        {user ? <AuthorizedLayout /> : <UnauthorizedLayout />}
      </NavigationContainer>
    </BottomSheetModalProvider>
  </GestureHandlerRootView>
);

2. 清理弹窗页面的冗余代码 #

移除弹窗页面中的GestureHandlerRootView和手动添加的PanGestureHandler，恢复BottomSheetModal的原生用法即可。修改后的弹窗页面代码：

return (
    <>
      {loading ? (
        <ExploreSkeleton />
      ) : (
        <>
          <ExploreHeader
            userData={userData}
            presentCityModal={presentCityModal}
          />
          <FlatList
            data={venues}
            ListHeaderComponent={listHeaderComponent}
            renderItem={renderItem}
            ListFooterComponent={listFooterComponent}
            contentContainerStyle={styles.contentContainerStyle}
            onEndReached={getMoreVenues}
            onEndReachedThreshold={0.5}
          />
          <BottomSheetModal snapPoints={snapPoints} ref={bottomSheetModalRef}>
            <View>
              <Text>TESTING MODAL</Text>
            </View>
          </BottomSheetModal>
        </>
      )}
    </>
  );

3. 验证依赖配置（可选） #

确保react-native-gesture-handler已正确安装：

# 安装依赖
npm install react-native-gesture-handler
# iOS额外执行
cd ios && pod install

内容的提问来源于stack exchange，提问作者David Henry