美文网首页
native向js传递数据

native向js传递数据

作者: DumpCicada | 来源:发表于2018-01-25 16:39 被阅读131次

    出处

    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被动接收 可多端接收

    相关文章

      网友评论

          本文标题:native向js传递数据

          本文链接:https://www.haomeiwen.com/subject/mrbvaxtx.html