React native 与Android原生交互方式(二)

前言

上一篇文章介绍了使用发送事件的方式来进行React native与Android之间的通信，如果想了解的话，请看看这篇文章的介绍React native 与Android原生交互方式(一),本文将介绍第二种通信方式，即回调的方式，它是通过callback来实现通信的。

Callback方式

原生模块有一种特殊的参数那就是回调函数，在绝大多数情况下该用来提供一个回调方法进行传值给JavaScript。具体该怎么样提供回调方法呢？还记得前面的文章中讲到原生模块封装给React native前端调用不？被调用的方法使用@ReactMethod注解。对了，这边也差不多。我们来看一下代码是怎么样实现的。本文的代码是基于上一篇文章中的项目代码示例。

1、原生模块中首先在MyModule类中添加被Rn调用的方法，代码如下：

 @ReactMethod
    public void callNativeByCallBack(String msg, Callback successCallback){
        Log.e("wfunny","called by callback");
        String result = "callback 处理结果：" +msg;
        successCallback.invoke(result);

    }

2、React native端在index.android.js中添加调用原生的方法代码，本例子是通过点击文本触发的，代码如下：

 render(){
    return (
      <View style = {myStyles.container}>
        <Text style = {myStyles.welcome} onPress={this.callNative.bind(this)}>
            当你点我的时候会调用原生方法，原生方法延迟3s后会向前端发送事件。
            前端一直在监听该事件，如果收到，则给出alert提示! send 方式
        </Text>
        <Text style = {myStyles.welcome} onPress={this.callNativeByCallBack.bind(this,'callback send ok',null)}>
           callback方式 交互方式！！！！
        </Text>
        <Text style = {myStyles.instructions}>
            {this.state.content}
        </Text>

      </View>

    );

  }
callNativeByCallBack(msg){
        console.log("js called by callback");
        NativeModules.MyModule.callNativeByCallBack(msg
        ,(result) => {
          this.setState({content:result});
        })
  }

从以上代码可以看出，callNativeByCallBack 调用原生的模块，CallBack对应的就是JS中的function,JS调用Native模块处理完毕以后将结果回调给JS端。向Native发送了一个"callback send ok"的消息,在第二个参数接收回调结果。 Callback的方式通俗简单易懂。但是注意该回调方法在调用之后不会立即有返回，因为该为桥接方式的异步调用的操作，该通过消息循环完成，所以返回时机不确定！

上一篇：React native 与Android原生交互方式(一)
下一篇：React native 与Android原生交互方式(三)