升级React Native后安卓端出现RNGestureHandlerRootView未找到错误求助

1. 安装缺失的依赖 #

你的package.json中缺少react-native-gesture-handler，而@react-navigation/drawer依赖该库处理手势逻辑。执行以下命令安装适配RN 0.70.6的版本：

npm install react-native-gesture-handler@^2.8.0
# 或使用yarn
yarn add react-native-gesture-handler@^2.8.0

2. 配置安卓端初始化 #

打开安卓项目的MainActivity.java（Kotlin项目则为MainActivity.kt），添加GestureHandler的初始化代码：

Java版本（MainActivity.java） #

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

public class MainActivity extends ReactActivity {
  // 保留原有代码

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

Kotlin版本（MainActivity.kt） #

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

class MainActivity : ReactActivity() {
  // 保留原有代码

  override fun createReactActivityDelegate(): ReactActivityDelegate {
    return object : ReactActivityDelegate(this, mainComponentName) {
      override fun createRootView(): ReactRootView {
        return RNGestureHandlerEnabledRootView(this@MainActivity)
      }
    }
  }
}

3. 用GestureHandlerRootView包裹根组件 #

在App入口文件（如App.js/App.tsx）中，导入并使用GestureHandlerRootView包裹整个应用：

import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <NavigationContainer>
        {/* 你的导航栈或其他业务组件 */}
      </NavigationContainer>
    </GestureHandlerRootView>
  );
}

4. 清理缓存并重新构建 #

执行以下命令清除缓存，避免旧配置干扰：

# 清理npm/yarn缓存
npm cache clean --force
# 或
yarn cache clean

# 清理安卓构建缓存
cd android && ./gradlew clean && cd ..

# 重置metro缓存并重启服务
npx react-native start --reset-cache

# 重新运行安卓项目
npx react-native run-android

内容的提问来源于stack exchange，提问作者Trần Ân