React Native和原生的交互

1、通过Callback的方式(同步调用)

原生模块的代码：

public class TestModule extends ReactContextBaseJavaModule {
    public TestModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public StringgetName() {
        return "TestModule"; //自定义的一个调用类名，React Native的调用方式为TestModule.方法名(参数名)
    }

    @ReactMethod //该注解表示该方法可供React Native调用
    public void getUserData(long userId, Callback success, Callback fail) {
        if (success == null || fail == null) {
            return;
        }
        
        User user = getUserDataFromSql() //从数据库中获取用户信息
        if(user == null) {
            fail.invoke("user not found");
            return;
        }
        WritableNativeMap map = new WritableNativeMap();
        map.putString("userName", user.getName());
        success.invoke(map);
    }
}

可以看到原生成功获取数据后调用success.invoke()方法，失败调用fail.invoke()方法。

React Native的代码：

TestModule. getUserData(1000, 
  (map) => {
    console.log('userName=' + map.userName);
  },
  (msg) => {
    console.log(msg);
  },
);

上面是React Native调用原生的getUserData方法，第一个参数是userId，第二、第三个参数是一个Callback对象，里面的map和msg分别是原生传过来的map和错误信息字符串，直接使用即可。

2、通过Promise的方式(同步调用)

原生模块的代码：

public class TestModule extends ReactContextBaseJavaModule{
    public TestModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public StringgetName() {
        return "TestModule";
    }

    @ReactMethod
    public void getUserData(long userId, Promise promise) {
        User user = getUserDataFromSql() //从数据库中获取用户信息
        if(user == null) {
            promise.resolve("user not found");
            return;
        }
        WritableNativeMap map = new WritableNativeMap();
        map.putString("userName", user.getName());
        promise.resolve(map);
    }
}

getUserData方法接收Promise类型的对象作为参数，当数据处理完后，原生模块通过Promise相关的方法向React Native传递信息。

注意：在原生中Promise类型的参数必须要放在最后一位，这样React Native才能正常调用。

React Native的代码：

TestModule.getUserData(1000).then(msg=>{
    console.log('userName=' + msg.userName);
    this.setState({
      userName : msg.userName,
    })
});

3、通过通知的方式(异步调用)

原生模块的代码：

WritableNativeMap map = new WritableNativeMap();
map.putString("userName", user.getName());
reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
            .emit("testEventName", Arguments.makeNativeMap(map));

上述的代码给React Native发送了一个名为"testEventName"的通知事件，并且携带了map作为参数。

React Native的代码： React Native 对原生模块名为“testEventName”的事件进行监听。

//注册监听事件
DeviceEventEmitter.addListener('testEventName',this.onListenerResult);

onListenerResult = (msg)=> {
    this.setState({
        userName : msg.userName,
    });
}

使用了DeviceEventEmitter注册监听了名为“testEventName”的事件，当原生模块发出名为“testEventName”的事件后，绑定在该事件上的onListenerResult = (msg)会被回调。 通过msg.userName就可获得携带的数据。