- 创建原生Module
- 注册原生Module
- 在Application中实例化原生Module
- ReactNative 引入原生Module
- 原生回调给ReactNative
1、创建原生Module
首先创建一个原生Module，这个Module继承ReactContextBaseJavaModule的Java类，在这个类中实现RN调用原生的一些功能<br />
public class CustomModule extends ReactContextBaseJavaModule{
public CustomModule(ReactApplicationContext reactContext) {
super(reactContext);
}
/**
* ReactContextBaseJavaModule要求它的派生类必须实现一个getName方法
* @return 返回的字符串用于在RN中标记你创建的这个原生模块
*/
@Override
public String getName() {
return "myModule";
}
/**
*声明一个RN调用原生的一个方法，且这个Java方法需要使用注解@ReactMethod
* 下面展示了一个android Toast的显示以及跳转到原生Activity
*/
@ReactMethod
public void goActivity(String params){
Toast.makeText(getCurrentActivity(),params,Toast.LENGTH_SHORT).show();
Intent intent = new Intent(getCurrentActivity(),SecondActivity.class);
getReactApplicationContext().startActivity(intent);
}
}
2、注册原生Module
要想使用你所创建的原生Module，你还需要注册这个Module。注册时，需要实现ReactPackage接口并实现该接口的抽象方法
public class CustomPackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
return Arrays.<NativeModule>asList(new CustomModule(reactContext));
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}
3、实例化Module注册类
在注册原生Module之后，还需要在MainApplication中实例化你的注册类
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new CustomPackage()//实例化Module注册
);
}
以上三个步骤，调用原生的Android代码就完成了，下面展示JS该如何调用你所创建的原生Module
4、JS调用创建的原生Module
首先需要引入原生Module
import { NativeModules } from 'react-native'
使用创建的原生方法
NativeModules.myModule.goActivity("Hello Android")<br />
myModule你所创建的Module的标识（getName的返回值），也可以理解为Module的ID，goActivity你所声明的原生方法
<br />
<br />
JS调用原生，可以传递自己想要的参数，那么如何回调原生的处理结果呢？
5、原生回调传值给JS
在之前我们定义的原生方法中，方法的返回类型为void，那么是否可以直接定义为我们所需要的返回数据？答案是不行的，RN跨语言访问是异步的，定义的方法返回类型必须为void，要想达到此目的，需要借助CallBack或者ES6的promise机制
5.1采用CallBack实现原生回调给JS
android原生方法：使用CallBack.invoke进行回传
@ReactMethod
public void goActivity(String params, Callback callback){
callback.invoke("回调传旨");
Toast.makeText(getCurrentActivity(),params,Toast.LENGTH_SHORT).show();
Intent intent = new Intent(getCurrentActivity(),SecondActivity.class);
getReactApplicationContext().startActivity(intent);
}
JS代码：
NativeModules.myModule.goActivity("调用原生",(mCallBack) =>{alert(mCallBack)})}
5.2采用Promise实现原生回调给JS
android原生代码：promise.resolve表成功。promise.reject表失败
@ReactMethod
public void goActivity(String params, Promise promise){
try{
promise.resolve("promise回调成功");
}catch (Exception e){
promise.reject("0","promise回调失败");
}
Toast.makeText(getCurrentActivity(),params,Toast.LENGTH_SHORT).show();
Intent intent = new Intent(getCurrentActivity(),SecondActivity.class);
getReactApplicationContext().startActivity(intent);
}
}
JS代码：
NativeModules.myModule. goActivity("调用原生").then((success)=>{alert(success)},(code,error)=>{ alert(error) })
