当我尝试加载带有本机视图的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
我已经关闭并重建了这个项目。
1条答案
按热度按时间im9ewurl1#
我失踪了
所以
override fun getDelegate(): ViewManagerDelegate<MapView> = delegate
没有找到它需要的东西。