【RN笔记】ReactNative调用Android原生

1. 创建原生Module
2. 注册原生Module
3. 在Application中实例化原生Module
4. ReactNative 引入原生Module
5. 原生回调给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) })