RN调用原生方法基础---android(原生吐司为例)

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

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

在app>java>com.xxxx中新建一个类：





取个名字:



这里继承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)列表里：

在app>java>com.xxxx中再建一个类：



去 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<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
//new一个原生模块列表
List<NativeModule> modules=new ArrayList<>();
//列表加入我们刚刚自己创建的原生模块，传了一个reactContext上下文过去
modules.add(new MyNativeModule(reactContext));
//最后把列表返回
return modules;
}

//这里是创建view管理器
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();//先不用，先emptyList
}
}

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

打开MainApplication





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

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

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

在rn中要先引入NativeModules模块

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