前提是用react－native init 工程名 已经初始化好一个可以正常运行的RN工程（检验标准是在手机上可以正常运行）。
下面的步骤是在RN0.17版本的，0.18版本后也是可以的，由于官方进一步封装，具体步骤可能略有不同。
一、导入Android原生模块的步骤
步骤1.新建java类继承ReactContextBaseJavaModule.
public class MyToastModule extends ReactContextBaseJavaModule
必须复写getName方法，return后跟的是JS里要调用的名字（可不同于类名）。
public String getName() {
return "MyToastAndroid";
}
定义要被JS使用的方法，要加上注解@ReactMethod
@ReactMethod
public void show(){
Toast.makeText(getReactApplicationContext(),"hello",Toast.LENGTH_LONG).show();
}
步骤2.新建类实现ReactPackage接口
public class MyReactPackage implements ReactPackage
有三个方法需要实现：createNativeModeule,createJSModules,createViewManagers.这三个方法都返回list，
要注意一点是虽然默认返回null，但这样写编译时会出错，要改写成返回空集合，一般写成
return Collections.emptyList();
此时需要在createNativeModeule里，返回带有上面module的集合
@Override
public List createNativeModules(ReactApplicationContext reactContext) {
return Arrays.asList(
new MyToastModule(reactContext)
);
}
步骤3.在MainActivity里（在RN工程里是自动生成的入口activity），添加上面的自定义的ReactPackage
mReactInstanceManager = ReactInstanceManager.builder()
。。。。//省略其他代码
.addPackage(new MainReactPackage())
.addPackage(new MyReactPackage())
。。。。／／省略其他代码
步骤4.在JS里调用刚才的原生模块
React.NativeModules.MyToastAndroid.show();
二、上面是最简单的一种调用，基本步骤是不变的，接下来是在上面基础上多了点东西的调用。
1.在JS里调用带参数的原生模块里的方法
将上面的MyToastModule类里的show方法改为
@ReactMethod
public void show(String message,int dur){
Toast.makeText(getReactApplicationContext(),message,dur).show();
}
在JS里调用为
React.NativeModules.MyToastAndroid.show("hello",1);
2.在JS里调用原生模块里的预设参数
在MyToastModule的Java类里复写方法getConstants，此方法返回了需要导出给JavaScript使用的常量
@Override public Map getConstants() { final Map constants = new HashMap<>(); constants.put("HAHA", Toast.LENGTH_SHORT); constants.put("LONG", Toast.LENGTH_LONG);
return constants; }
在JS里调用为
React.NativeModules.MyToastAndroid.show("hellohaha",React.NativeModules.MyToastAndroid.HAHA);
3.将原生模块封装成一个JS模块，以便省下每次都从NativeModules中获取对应模块的步骤，从JS端访问更为方便。
新建名为MyToastAndroidJS的JS文件，文件里内容为
'use strict'
var {NativeModules} = require('react-native');
module.exports=NativeModules.MyToastAndroid;
在其他JS代码或文件中可以这样调用，
var MyToastAndroidLOL = require('./MyToastAndroidJS');//此处确保按文件路径可以被查找到
MyToastAndroidLOL.show('haha JSModule',MyToastAndroidLOL.HAHA);
三、回调函数
上面全是JS调用原生模块里的方法，有参或无参，但原生模块只是被调用，没有反馈回来数据，下面是回调使用说明。（此处承接上面的3）
1.使用Callback回调
在MyToastAndroid中添加方法showAll。在showAll的参数中的callback是com.facebook.react.bridge.Callback，注意别导错包了。
@ReactMethod
public void showAll(int a,int b,Callback erroCallBack,Callback successCallback){
try{
int c=a/b;
successCallback.invoke(a,b);
}catch(Exception e){
erroCallBack.invoke(e.getMessage());
}
}
在JS中调用showAll方法
MyToastAndroidJJ.showAll(
1,2,
(msg) => {console.log(msg)},
(x,y) => {console.log(x+':'+y)}
);
运行后logcat上会打印出1:2，
当是
MyToastAndroidJJ.showAll(
1,0,
(msg) => {console.log(msg)},
(x,y) => {console.log(x+':'+y)}
);
运行后logcat上会打印出 divide by zero等异常信息。
这样就实现了原生模块向JS传递数据，并且其中有很大的自由度供调用实现。但要注意showAll里的参数个数在被JS调用时是要一一对应的，在MyToastAndroid中定义了几个参数就要在JS中调用时提供几个参数。
2.使用Promise回调
在MyToastAndroid中添加方法showB
@ReactMethod
public void showB(int a,int b,Promise promise){
try{
int c=a/b;
promise.resolve(a+b);
}catch(Exception e){
promise.reject("test:"+e.getMessage());
}
}
在JS中，声明一个方法
showBInJS: async function (){
try{
var c = await MyToastAndroidJJ.showB(1,2);
console.log("test:"+c);
}catch(e){
console.log(e);
}
},
在JS中调用
this.showBInJS();
在log中会打印出 test:3。
把上面声明中的2改为0，保存然后Reload JS。
在log中会打印出 test:divide by zero 等异常信息。
上面是返回一个参数，下面是可以返回多个参数的方式（不唯一）
在MyToastAndroid中改写方法showB
@ReactMethod
public void showB(int a,int b,Promise promise){
try{
int c=a/b;
WritableMap map = Arguments.createMap();
map.putInt("haha",a);
map.putInt("hehe",b);
promise.resolve(map);
}catch(Exception e){
promise.reject("fyp:"+e.getMessage());
}
}
在JS中改写showBInJS的声明
showBInJS: async function (){
try{
var {haha,hehe} = await MyToastAndroidJJ.showB(1,2);
console.log("test:"+haha+":"+hehe);
}catch(e){
console.log(e);
}
},
调用不变。
重新react－native run-android,在log里会打印出 test：1:2。
网友评论