android 调用rn方法,RN调用原生方法---android(原生吐司为例)

一.用AS打开一个已存在的RN项目

二.在android原生这边创建一个类继承ReactContextBaseJavaModule，这个类里面放我们需要被rn调用的方法，封装成了一个原生模块:

新建一个类：

取个名字:

这里继承ReactContextBaseJavaModule，然后会报错，鼠标移上去会出现灯泡提示，点击灯泡可以自动帮我们导入解决

分装模块:

package com.rnhybriddemo1;

import android.content.Context;

import android.widget.Toast;

import com.facebook.react.bridge.ReactApplicationContext;

import com.facebook.react.bridge.ReactContextBaseJavaModule;

/**

* Created by chason on 2017/10/21.

*/

public class MyNativeModule extends ReactContextBaseJavaModule{

private ReactApplicationContext mContext; //给一个上下文

//这里是构造方法

public MyNativeModule(ReactApplicationContext reactContext) {

super(reactContext);

mContext=reactContext;//得到一个reactContext

}

@Override

public String getName() {

return "MyNativeModule";//一定要有名字，返回一个名字，到时候rn代码中通过这个名字访问类里面的方法

}

//函数不能有返回值，因为被调用的原生代码是异步的，原生代码执行结束之后只能通过回调函数或者发送消息给rn那边

//自己写的方法,rn调用的

@ReactMethod //这里要加上注解，方法才能被调用

public void rnCallNative(String msg){

//吐司，需要一个上下文环境

Toast.makeText(mContext,msg,Toast.LENGTH_SHORT).show();

//上下文环境，内容，长度

}

}

三.在android原生这边创建一个类实现接口ReactPackage包管理器，并把第二步创建的类加到原生模块(NativeModule)列表里：

再建一个类:

去 implements ReactPackage。然后会报错，鼠标移上去会提示import解决，然后会自动出现下面的创建原生模块和创建view管理器的函数

把我们创建的类增加到原生列表中：

package com.rnhybriddemo1;

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.ArrayList;

import java.util.Collections;

import java.util.List;

/**

* Created by chason on 2017/10/21.

*/

public class MyReactPackage implements ReactPackage{

//这里是创建原生模块

@Override

public List createNativeModules(ReactApplicationContext reactContext) {

//new一个原生模块列表

List modules=new ArrayList<>();

//列表加入我们刚刚自己创建的原生模块，传了一个reactContext上下文过去

modules.add(new MyNativeModule(reactContext));

//最后把列表返回

return modules;

}

//这里是创建view管理器

@Override

public List createViewManagers(ReactApplicationContext reactContext) {

return Collections.emptyList();//先不用，先emptyList

}

}

四.将第三步创建的包管理器添加到ReactPackage列表里(getPackages方法里)

打开MainApplication

把第三步创建的包管理器添加到ReactPackage列表里(getPackages方法里)

在List getPackages方法里，new一个刚刚我们第三步创建的包

五.在RN中去调用原生模块、添加NativeModules从react-native

在rn中要先引入NativeModules模块

dianji(){

NativeModules.MyNativeModule.rnCallNative("rn调用原生成功啦");

}