RN>0.6版本下如何在React Navigation 6.x Native Stack中配置react-native-gesture-handler

核心结论 #

你不需要为每个页面单独包裹gestureHandlerRootHOC，也不需要单独包裹使用手势的业务组件，React Navigation 6.x的Native Stack Navigator不属于需要特殊适配的原生导航库范畴。

配置逻辑说明 #

RNGH官方文档提到的需要用gestureHandlerRootHOC包裹所有页面的场景，仅针对wix/react-native-navigation这类完全接管原生路由、每个页面独立挂载ReactRootView的导航库。而React Navigation的Native Stack实现中，所有页面共享同一个顶层ReactRootView，只需要完成基础配置即可正常使用手势库。

正确配置步骤 #

• 第一步（必须）：在项目入口文件（一般为根目录的index.js）的最顶部导入手势库，优先级高于所有其他导入语句：

import 'react-native-gesture-handler';
// 其他所有import放在这行之后

• 第二步：保留你现有App.js中的Native Stack配置逻辑即可，不需要修改Stack.Screen的component参数。
• 兜底方案（仅当安卓端出现手势无响应问题时使用）：直接用gestureHandlerRootHOC包裹整个App根组件，修改你App.js的导出代码即可，不需要修改其他页面逻辑：

export default gestureHandlerRootHOC(App);

常见疑问解答 #

你看到的react-native-vision-camera示例项目没有用到gestureHandlerRootHOC，就是因为作者已经完成了入口文件的基础导入配置，属于该场景下的常规用法，不需要额外的适配操作。

如果你的项目需要配合react-native-reanimated实现手势动画，额外确认babel.config.js中已经配置了reanimated对应的babel插件即可。

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