RN0.69自定义Native组件报错：requireNativeComponent未在UIManager中找到

根因分析 #

你的问题核心是JS端与Native端的组件名称不匹配：

• Kotlin端CealScanQrViewManager.kt的getName()方法返回"CealScanQrView"
• JS端CealScanQrViewManager.tsx调用requireNativeComponent时传入的是"CealScanQrViewManager"
  React Native框架依赖这个名称关联JS组件和Native管理器，名称不一致就会触发requireNativeComponent CealScanQrViewManager was not found in UIManager错误。

修复方案 #

将两端的名称统一，二选一即可：

方案1：修改Kotlin端名称 #

修改CealScanQrViewManager.kt的getName()返回值，与JS端传入的名称一致：

override fun getName(): String {
    return "CealScanQrViewManager"
}

方案2：修改JS端名称 #

修改CealScanQrViewManager.tsx中requireNativeComponent的参数，与Kotlin端返回的名称一致：

const CealScanQrView = requireNativeComponent<CealScanQrViewProps>("CealScanQrView");

额外注意 #

• 修改Native代码后，需执行./gradlew clean清理Android构建缓存，再重启Metro服务
• React Native 0.69+默认自动注册Native组件管理器，无需手动配置，但如果有自定义注册逻辑，请确认注册代码中使用的名称与修改后的一致

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