不变违例:requireNativeComponent:在带有React-Native android端的UIManager中未找到“RTNMapImage”

gk7wooem  于 2023-06-24  发布在  React
关注(0)|答案(1)|浏览(149)

当我尝试加载带有本机视图的Fabric组件时,我会遇到以下错误:无法在Thread内部创建处理程序:

当我重新加载应用程序时,我得到:不变违反:requireNativeComponent:在UIManager中找不到“RTNMapImage”。
我不确定这两个错误是否有联系,因为我是RN的新手,我不知道如何解决它。
下面是我的App.tsx代码:

import React from 'react';
    import type {PropsWithChildren} from 'react';
    import {
      Button,
      SafeAreaView,
      ScrollView,
      StatusBar,
      StyleSheet,
      Text,
      useColorScheme,
      View,
    } from 'react-native';
    
    import {
      Colors,
      DebugInstructions,
      Header,
      LearnMoreLinks,
      ReloadInstructions,
    } from 'react-native/Libraries/NewAppScreen';
    
    import RTNMapImage from 'rtn-map-view/js/RTNMapImageNativeComponent';
    
    
    const App: () => JSX.Element = () => {
      return (
        <RTNMapImage
          style={{width: '100%', height: 30}}
        />
      );
    };
    export default App;

下面是我的MapView:

package com.rtnmapview
    
    import android.content.Context
    import android.view.LayoutInflater
    import android.widget.FrameLayout
    import com.facebook.react.uimanager.ThemedReactContext
    import com.visioglobe.visiomoveessential.VMEMapController
    import com.visioglobe.visiomoveessential.VMEMapView
    
    class MapView : FrameLayout {
      var mMapView : VMEMapView? = null
      var mMapController : VMEMapController? = null
      var mMapViewManager : MapViewManager? = null
      var filePath : String? = null
      private val context: ThemedReactContext? = null
    
      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?
        mMapView?.let { mMapController!!.loadMapData() }
        mMapView?.let { mMapController!!.loadMapView(it) }
    
      }
    
      //constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {
      //}
    }

视图管理器:

package com.rtnmapview
    
    import androidx.core.content.ContentProviderCompat.requireContext
    import com.facebook.react.bridge.ReactApplicationContext
    import com.facebook.react.module.annotations.ReactModule
    import com.facebook.react.uimanager.SimpleViewManager
    import com.facebook.react.uimanager.ThemedReactContext
    import com.facebook.react.uimanager.ViewManagerDelegate
    import com.facebook.react.uimanager.annotations.ReactProp
    import com.facebook.react.viewmanagers.RTNMapImageManagerInterface
    import com.visioglobe.visiomoveessential.VMEMapController
    import com.visioglobe.visiomoveessential.VMEMapControllerBuilder
    import com.visioglobe.visiomoveessential.listeners.VMELifeCycleListener
    import org.json.JSONObject
    import java.io.File
    import java.io.FileOutputStream
    import java.io.InputStream
    
    
    @ReactModule(name = MapViewManager.NAME)
    class MapViewManager (context: ReactApplicationContext) : SimpleViewManager<MapView>(), RTNMapImageManagerInterface<MapView>{
        var filePath : String = "shizuru_regular.ttf"
        var context = context
        var mMapController : VMEMapController = VMEMapController(context, VMEMapControllerBuilder())
        private val mLifeCycleListener: VMELifeCycleListener = object : VMELifeCycleListener() {
            override fun mapDidInitializeEngine() {
                val lFilePath: String = extractFromAssetsAndGetFilePath()
                if (!lFilePath.isEmpty()) {
                    mMapController.setMapFont(lFilePath)
                } else {
                    mMapController.setMapFont(filePath)
                }
            }
    
            fun mapDataDidLoad(mapVenueInfo: JSONObject) {
                super.mapDataDidLoad()
            }
    
            override fun mapViewDidLoad() {
                super.mapViewDidLoad()
            }
    
            override fun mapDidGainFocus() {
                super.mapDidGainFocus()
            }
        }
    
        private fun extractFromAssetsAndGetFilePath(): String {
            val f: File = File( this.context.cacheDir.toString() + "/" + filePath)
            if (!f.exists()) {
                try {
                    val `is`: InputStream = this.context.assets.open(filePath)
                    val size = `is`.available()
                    val buffer = ByteArray(size)
                    `is`.read(buffer)
                    `is`.close()
                    val fos = FileOutputStream(f)
                    fos.write(buffer)
                    fos.close()
                } catch (e: Exception) {
                    throw RuntimeException(e)
                }
            }
            return f.path
        }
    
    
        override fun getName(): String {
            return NAME
        }
    
        override fun getDelegate(): ViewManagerDelegate<MapView> = delegate
    
        override fun createViewInstance(p0: ThemedReactContext): MapView {
            this.mMapController.setLifeCycleListener(mLifeCycleListener);
            return MapView(context = p0, this);
        }
    
        companion object {
            const val NAME = "RTNMapViewImage"
        }
    
        @ReactProp(name = "filePath")
        override fun setFilePath(view: MapView?, value: String?) {
            if (value != null) {
                filePath = value
            }
    
        }
    
        @ReactProp(name = "mapPath")
        override fun setMapPath(view: MapView?, value: String?) {
            if (value != null) {
                mMapController.mapPath = value
            }
        }
    
        @ReactProp(name = "mapSecretCode")
        override fun setMapSecretCode(view: MapView?, value: Int) {
            if (value != null) {
                mMapController.mapSecretCode = value
            }
        }
    
        @ReactProp(name = "mapHash")
        override fun setMapHash(view: MapView?, value: String?) {
            if (value != null) {
                mMapController.mapHash = value
            }
        }
    
        @ReactProp(name = "mapServerUrl")
        override fun setMapServerUrl(view: MapView?, value: String?) {
            if (value != null) {
                mMapController.mapServerUrl = value
            }
        }
    
    }

这些包将通过以下MapViewPackage公开:

package com.rtnmapview
    
    import com.facebook.react.ReactPackage
    import com.facebook.react.bridge.NativeModule
    import com.facebook.react.bridge.ReactApplicationContext
    import com.facebook.react.uimanager.ViewManager
    
    class MapViewPackage : ReactPackage {
      override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> =
        listOf(MapViewManager(reactContext))
        
      override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> =
        emptyList()
    }

下面是我的RTNMapImageComponents.tsx,用于js端:

import type {ViewProps} from 'ViewPropTypes';
    import type {HostComponent} from 'react-native';
    import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
    
    export interface NativeProps extends ViewProps {
        filePath : string;
        mapPath?: string; 
        mapSecretCode?: Int32; 
        mapHash?: string; 
        mapServerUrl?: string; 
      }
    
    export default codegenNativeComponent<NativeProps>(
        'RTNMapImage'
      ) as HostComponent<NativeProps>;

React-Native guide
我已经关闭并重建了这个项目。

im9ewurl

im9ewurl1#

我失踪了

private val delegate = RTNMapViewManagerDelegate(this)

所以override fun getDelegate(): ViewManagerDelegate<MapView> = delegate没有找到它需要的东西。

相关问题