刚开始接触RN,一步一踩坑,按照RN中文网集成,到toast这里就进行不下去了,红屏报错TypeError: null is not an object (evaluating '_ToastExample.default.show')
错误原因:继承了自定义的ReactActivity,没有link到本地module
解决办法:继承
com.facebook.react.ReactActivity
这个是facebook写好的
整体代码如下
package com.yangfan.myreactnativeapp
import com.facebook.react.ReactActivity
import com.facebook.react.ReactActivityDelegate
import com.facebook.react.ReactRootView
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView
class MyReactActivity : ReactActivity() {
override fun getMainComponentName(): String? = "MyReactNativeApp"
override fun createReactActivityDelegate(): ReactActivityDelegate {
return object : ReactActivityDelegate(this@MyReactActivity, mainComponentName) {
override fun createRootView(): ReactRootView = RNGestureHandlerEnabledRootView(this@MyReactActivity)
}
}
}
MainApplication
package com.yangfan.myreactnativeapp
import android.app.Application
import com.facebook.react.ReactApplication
import com.facebook.react.ReactNativeHost
import com.facebook.react.ReactPackage
import com.facebook.react.shell.MainReactPackage
import com.facebook.soloader.SoLoader
import com.swmansion.gesturehandler.react.RNGestureHandlerPackage
/**
* Created by yangfan
* nrainyseason@163.com
*/
class MainApplication : Application(), ReactApplication {
private val mReactNativeHost = object : ReactNativeHost(this) {
override fun getPackages(): MutableList<ReactPackage> {
return mutableListOf(
MainReactPackage(),
RNGestureHandlerPackage(),
CustomToastPackage()
)
}
override fun getUseDeveloperSupport(): Boolean {
return BuildConfig.DEBUG
}
override fun getJSMainModuleName(): String = "index"
}
override fun getReactNativeHost(): ReactNativeHost = mReactNativeHost
override fun onCreate() {
super.onCreate()
SoLoader.init(this, false)
}
}
CustomToastPackage
package com.yangfan.myreactnativeapp
/**
* Created by yangfan
* nrainyseason@163.com
*/
import com.facebook.react.ReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.uimanager.ViewManager
import java.util.*
class CustomToastPackage : ReactPackage {
override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
return emptyList()
}
override fun createNativeModules(
reactContext: ReactApplicationContext
): List<NativeModule> {
val modules = ArrayList<NativeModule>()
modules.add(ToastModule(reactContext))
return modules
}
}
ToastModule
package com.yangfan.myreactnativeapp
import android.widget.Toast
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.bridge.ReactMethod
/**
* Created by yangfan
* nrainyseason@163.com
*/
class ToastModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
override fun getName(): String {
return "ToastExample"
}
companion object {
private val DURATION_SHORT_KEY = "SHORT"
private val DURATION_LONG_KEY = "LONG"
}
override fun getConstants(): Map<String, Any>? {
val constants = hashMapOf<String, Any>()
constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT)
constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG)
return constants
}
@ReactMethod
fun show(message: String, duration: Int) {
Toast.makeText(reactApplicationContext, message, duration).show()
}
}
ToastExample.js
// ToastExample.js
/**
* This exposes the native ToastExample module as a JS module. This has a
* function 'show' which takes the following parameters:
*
* 1. String message: A string with the text to toast
* 2. int duration: The duration of the toast. May be ToastExample.SHORT or
* ToastExample.LONG
*/
import { NativeModules } from "react-native";
// 下一句中的ToastExample即对应上文
// public String getName()中返回的字符串
module.exports = NativeModules.ToastExample;
调用
import ToastExample from "../toast/ToastExample";
ToastExample.show(item.content, ToastExample.SHORT)