React Native Android端Fabric组件加载双报错求助

错误1：Invariant Violation: requireNativeComponent: "RTNMapImage" was not found in the UIManager #

核心原因是JS侧声明的原生组件名称与Android端视图管理器注册的名称不匹配：

• JS侧codegenNativeComponent传入的名称是'RTNMapImage'
• Android端MapViewManager的NAME常量是"RTNMapViewImage"

修复步骤 #

统一两端组件名称（以RTNMapImage为例）：

1. 修改Android端MapViewManager的NAME常量：

companion object {
    const val NAME = "RTNMapImage"
}

2. 保持JS侧codegenNativeComponent的名称'RTNMapImage'不变。

错误2：Can't create handler inside Thread #

该错误是由于在非UI线程中尝试创建Handler或执行UI相关操作导致的。你的MapView构造函数中直接调用了loadMapData()和loadMapView()，这些操作内部可能会创建Handler，而构造函数的执行线程不一定是UI线程。

修复步骤 #

将地图加载操作切换到UI线程执行：
修改MapView的构造函数：

constructor(context: ThemedReactContext, mapViewManager: MapViewManager) : super(context) {
    this.mMapViewManager = mapViewManager
    this.mMapController = mapViewManager.mMapController
    this.filePath = mapViewManager.filePath
    val inflater = LayoutInflater.from(context)
    mMapView = inflater.inflate(R.layout.map_view, this, true) as VMEMapView?
    
    // 切换到UI线程执行地图加载逻辑
    post {
        mMapView?.let { mMapController!!.loadMapData() }
        mMapView?.let { mMapController!!.loadMapView(it) }
    }
}

额外检查项 #

1. 确保MapViewPackage已正确注册到MainApplication：

// MainApplication.kt
override fun getPackages(): List<ReactPackage> {
    return PackageList(this).packages.apply {
        add(MapViewPackage())
    }
}

2. 清理缓存并重新构建项目：

cd android && ./gradlew clean
cd .. && npx react-native run-android

内容的提问来源于stack exchange，提问作者Rémi