native向js传递数据

出处

https://github.com/crazycodeboy/RNStudyNotes/tree/master/React%20Native%E5%8E%9F%E7%94%9F%E6%A8%A1%E5%9D%97%E5%90%91JS%E4%BC%A0%E9%80%92%E6%95%B0%E6%8D%AE%E7%9A%84%E5%87%A0%E7%A7%8D%E6%96%B9%E5%BC%8F
有时需要在native和js之间传递数据，有以下几种方式

Callback

Callback是最常用的设计模式之一。无论是java，oc，c#，还是js等都会看到Callback的身影；
native支持Callback类型的参数，该Callback对应js中的function。

• 写法

//native部分
public class EasyKitModule extends ReactContextBaseJavaModule {
    private static final String TAG = EasyKitModule.class.getSimpleName();
    public EasyKitModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

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

    @ReactMethod//三个参数分别对应 js向native传的参数、js失败回调方法、js成功回调方法
    public void runWithCallback(String params, Callback errorCallback, Callback successCallback) {
        Log.i(TAG + "_params：", params);
        try {
            successCallback.invoke(getResult());//通过invoke方法将数据返回给js
        } catch (Exception e) {
            errorCallback.invoke(e.getMessage());
        }
    }
    ...
}

//js部分
export default class Tab1 extends BaseComponent {

 _onPress = () => {
        this._invokeNativeWithCallback()
    }

 _invokeNativeWithCallback = () => {
        let greetFromJS = 'hello,it is from reactjs'
        const errCallback = (errCode, errMsg) => {
            console.log(errCode, errMsg)
        }
        const successCallback = (data) => {
            console.log(data)
        }
        EasyKit.runWithCallback(//这里的三个参数与原生模块中的方法相对应
            greetFromJS,
            errCallback,
            successCallback,
        )
    }
    ...
}

Promise

Promises是es6的一个新的特性，在rn中非常重要。native也支持Promise。

• 写法

//native部分
  @ReactMethod//接收参数对应js向native传递的参数，js中的Promise容器
    public void runWithPromise(String params, Promise promise) {
        Log.i(TAG + "_params：", params);
        try {
            int a = 10 / 0;
            promise.resolve(getResult());
        } catch (Exception e) {
            promise.reject(TAG, e.getMessage());
        }
    }

//js部分
  _invokeNativeWithPromise = () => {
        let greetFromJS = 'hello,it is from reactjs'
        new Promise((resolve, reject) => {
            const result = EasyKit.runWithPromise(greetFromJS)//这里调用native方法的时只需传前面的参数
            resolve(result)
        }).then((result) => {
            console.log(result)
        }).catch((error) => {
            console.log(error)
        })
    }

Event

native支持以事件的方式向js发送数据，像Android中的广播，iOS中的通知中心；接收方注册接收该事件即可接收到native发送的事件。

• 写法
  这里通过js调用native方法来发送事件

  //native部分
   @ReactMethod
    public void sendEventFromNative(String params) {
        WritableMap map = Arguments.createMap();
        map.putString("nativeMsg", "hello,it is a global event from native");
        sendEvent(getReactApplicationContext(), "wishesFromNative", map);
    }
    
    private void sendEvent(ReactContext reactContext, String eventName, @Nullable WritableMap params) {
        reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit(eventName, params);//发送的事件包括事件名和需要传递的数据
    }

  //js部分
    _sendEventFromNative = () => {
        let greetFromJS = 'hello,it is from reactjs'
        //触发native发送事件
        EasyKit.sendEventFromNative(greetFromJS)
    }
    
    //定义事件处理方法
    _handleNativeEvent = (data) => {
        console.log('tab_1 receives a native event', data)
    }

    componentDidMount() {
        //这里需要先添加事件监听 参数分别为 时间名、事件处理方法
        DeviceEventEmitter.addListener('wishesFromNative', this._handleNativeEvent)
    }

    componentWillUnmount() {
        //当必要时 可注销监听事件
        DeviceEventEmitter.removeListener('wishesFromNative')
    }

方式对比

类型	缺点	优点
Callback	单次传递	传递过程可控
Promise	单次传递	传递过程可控
Event	native驱动，js被动接收	可多端接收