ReactNative导入原生模块报错TypeError: null is not an object (evaluating '_ToastExample.default.show')

刚开始接触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)

 

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值