摘要

最近在学习RN相关的一些内容，现在做一下简单的介绍，React Native 与原生交互一般有四种方式，分别是Callback,Promise,RCTDeviceEventEmitter，Constants

---

准备工作

• 新建自己的交互模块MyModule

public class MyExampleModule extends ReactContextBaseJavaModule {

    private ReactContext mReactContext;

    public MyExampleModule(ReactApplicationContext reactContext) {
        super(reactContext);
        this.mReactContext = reactContext;
    }

    @Override
    public String getName() {
        return "MyModule";
    }
}

• 实现ReactPackage，将自己的交互模块注册给Reac Native

public class MyTransPackage implements ReactPackage {

    @Override
    public List<nativemodule> createNativeModules(ReactApplicationContext reactContext) {
        List<nativemodule> modules = new ArrayList&lt;&gt;();
        modules.add(new MyExampleModule(reactContext));//添加自己的交互模块

        return  modules;
    }
}

开始交互

交互方法定义在MyExampleModule类中，交互方法需要用@ReactMethod 注解标注，表明该方法会被RN调用。即被RN调用的原生方法必须使用@ReactMethod注解标注。

数据交互大致分为以下2种情况：

1. Android主动向JS端传递事件、数据
2. JS端被动向Android询问获取事件、数据

同时，交互一般有以下四种方式：

1. 事件Android native端可以发送参数到js 传递一个map

2. 通过函数回调,传递一个string

3. 通过promise 使用async,await 传递一个map

4. 直传常量数据（原生向RN）

• Android native向JS传递事件

  采用RCTDeviceEventEmitter：

Android端发送EventName事件

public void sendTransMisson(ReactContext reactContext, String eventName, @Nullable WritableMap params) {
    reactContext
            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
            .emit(eventName, params);

}

前端JS添加监听接受EventName事件

DeviceEventEmitter.addListener('EventName', function (msg) {

        console.log(msg);

        ToastAndroid.show("DeviceEventEmitter收到消息:" + "\n" + msg.key, ToastAndroid.SHORT)

    });

• JS向Android询问信息

  CallBack方式：

Native部分代码，回调函数中可以传入多个参数Object[]。

@ReactMethod
public void callBackString(String name, Callback callback) {
    callback.invoke("MyCallBackString ：" +name,"canshu22222");
}

前端JS接受两个参数

getCallBackString() {
           NativeModules.MyModule.callBackString("sendCallBackMsg",
        (msg,msg2) => {
            console.log(msg);
            ToastAndroid.show("CallBack收到消息:" + "\n" + msg + "  msg2:"+msg2, ToastAndroid.SHORT)

        }
    );
}

Promise传递方式：

Native端接受JS一个参数，同时通过promise将native信息Obeject传递出去

@ReactMethod
public void sendPromiseString(String name, Promise promise) {
    WritableMap writableMap=new WritableNativeMap();
    writableMap.putString("params1","20");
    writableMap.putString("params2","xiaoming");
    promise.resolve(writableMap);
}

JS前端接受信息到msg对象信息

getPromiseString() {
    NativeModules.MyModule.sendPromiseString("sendPromiseMsg").then(msg=> {
        console.log("年龄:" + msg.age + "/n" + "时间:" + msg.time);
        ToastAndroid.show("Promise收到消息:" + "\n" + "参数1:" + msg.params1 + "参数2:" + msg.params2, ToastAndroid.SHORT)

        this.setState({
            params1: msg.params1,
            params2: msg.params2,
        })
    }).catch(error=> {
        console.log(error);
    });
}

• 直传常量数据（原生向RN）

跨域传值，只能从原生端向RN端传递。RN端可通过NativeModules.[module名].[参数名]的方式获取

Native端Module类中常量方法

@Nullable
@Override
public Map<string, object=""> getConstants() {
    Map<string,object> params = new HashMap&lt;&gt;();
    params.put("constants1","我是常量1，传递给RN");
    params.put("constants2","我是常量2，传递给RN");
    return params;
}

JS端获取module类常量

getContantsString(){
    let constants1 = NativeModules.MyModule.constants1;
    let constants2 = NativeModules.MyModule.constants2;
    ToastAndroid.show("Constant:" + "\n" + "参数1:" + constants1 + "参数2:" + constants2, ToastAndroid.SHORT)
}

</string,object></string,></nativemodule></nativemodule>