React Native接入react-native-reanimated2时如何禁用未使用的RCTView

核心认知纠正 #

RCTView是React Native的核心原生基础视图组件，所有JS层的<View>最终都会映射到该组件，你没有主动调用是因为上层框架做了封装，完全无法禁用，报错的本质是RN核心原生组件注册失败，和RCTView本身无关。你之前开启调试模式解决报错属于临时绕过问题，没有触及根本原因。

根因分析 #

开启调试模式时RN会加载远程JS上下文，绕过了本地Hermes引擎下的原生组件注册校验，而接入react-native-reanimated 2后由于其依赖JSI能力，必须使用本地JS上下文，因此原本被掩盖的原生组件注册错误就暴露出来了。

解决步骤 #

• 第一步：全链路清空构建缓存，避免缓存异常导致的组件注册失败，依次执行以下命令：

  cd android && ./gradlew clean
  cd .. && rm -rf node_modules package-lock.json yarn.lock
  npm install
  npx react-native start --reset-cache
  

• 第二步：检查Babel配置，确认react-native-reanimated插件正确配置，该插件加载异常会打乱JS上下文的原生组件映射逻辑，babel.config.js配置参考：

  module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: ['react-native-reanimated/plugin'],
  };
  

• 第三步：检查Android端构建配置，打开android/app/build.gradle确认Hermes开关和RN依赖配置无异常：

  project.ext.react = [
    enableHermes: true, // 与你当前使用的JS引擎保持一致
  ]
  // 确认没有手动exclude任何com.facebook.react:react-native的核心子模块
  

• 第四步：检查原生包注册逻辑，打开MainApplication.java，确认ReactNativeHost的getPackages()方法中保留了默认的new MainReactPackage()，该包包含RCTView的注册逻辑，自定义原生包时很容易误删该配置。
• 第五步：兜底原生注册，若以上步骤都无效，可在MainActivity的onCreate方法中、加载JS bundle之前手动注册RCTView对应的原生管理器：

  import com.facebook.react.uimanager.UIManagerModule;
  import com.facebook.react.views.view.ReactViewManager;
  import java.util.Arrays;
  
  //  onCreate方法内添加以下代码
  UIManagerModule.registerViewManagers(
    Arrays.asList(new ReactViewManager())
  );
  

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