React Native使用PanGestureHandler移动盒子时onGestureEvent未触发

• 最常见的原因是react-native-gesture-handler安卓端原生配置未完成，这个库的手势事件依赖原生层的注入配置，仅安装npm包不会自动完成安卓端的全部配置
• 其次可能是版本不兼容：react-native-reanimated 1.x和过高版本的react-native-gesture-handler存在适配问题
• 缺少最外层的手势根容器包裹

1. 完成安卓端原生配置 #

打开安卓项目下的MainActivity.java文件，做如下修改：
首先添加头文件导入：

import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

然后在MainActivity类中添加如下方法重写逻辑：

@Override
protected ReactActivityDelegate createReactActivityDelegate() {
  return new ReactActivityDelegate(this, getMainComponentName()) {
    @Override
    protected ReactRootView createRootView() {
      return new RNGestureHandlerEnabledRootView(MainActivity.this);
    }
  };
}

2. 入口文件添加根手势容器 #

打开项目的入口文件（通常是index.js），用GestureHandlerRootView包裹你的App组件：

import { AppRegistry } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => () => (
  <GestureHandlerRootView style={{ flex: 1 }}>
    <App />
  </GestureHandlerRootView>
));

3. 校验版本兼容性 #

确保依赖版本匹配：

• react-native-gesture-handler 版本保持在1.10.x系列，不要升级到2.x以上版本
• 可以执行npm ls react-native-gesture-handler查看当前版本，版本不符合的话执行npm install react-native-gesture-handler@1.10.3重新安装对应版本

4. 重新编译项目 #

所有原生配置修改完成后，必须完全停止现有运行的RN服务，重新执行npx react-native run-android编译运行安卓项目，仅热重载JS不会让原生配置生效。

以上配置完成后，你现有的业务代码无需修改，即可正常触发onGestureEvent事件，红色盒子会跟随手势滑动移动。

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