React Native桥接Android模块-RNDeviceEventEmitter方式

1,365 阅读2分钟

React Native桥接Android模块-RNDeviceEventEmitter方式

相关链接

1. React Native桥接Android模块-Toast
2. React Native桥接Android模块-Activity
3. React Native桥接Android模块-用Promise机制调用安卓原生代码
4. React Native桥接Android模块-callback回调方式
5.React Native桥接Android模块-RNDeviceEventEmitter方式
6. React Native桥接Android模块-多线程RNDeviceEventEmitter方式
7.React Native桥接Android模块-RN获取Activity回调

1.创建模块类

public class RNManagerModule extends ReactContextBaseJavaModule {
    private Context mContext;
    public RNManagerModule(ReactApplicationContext reactContext) {
        super(reactContext);
        mContext = reactContext;
    }

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

@ReactMethod
    public void RNDeviceEvent() {
        sendEventToRn("sendEventToRn");
    }

    private void sendEventToRn(String eventName) {
        if (getReactApplicationContext() == null) {
            return;
        }
        getReactApplicationContext().getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit(eventName,"data");
    }

}

2.注册模块

public class RNPackage implements ReactPackage {
    @Override
     public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }


    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules=new ArrayList<>();
        //将我们创建的类添加进原生模块列表中
        modules.add(new RNManagerModule(reactContext));
        return modules;
    }

}

3.Android包的注册

将RNPackage添加到 MainApplication.java 中的 getPackages() 方法中

在这里插入图片描述

js调用原生代码

import { NativeModules,DeviceEventEmitter } from 'react-native';

componentDidMount(){
     //注册扫描监听
     DeviceEventEmitter.addListener('sendEventToRn', (value)=>{console.log('DeviceEventEmitter -->',value)});
  }
  
<Button 
   title="RNDeviceEventEmitter方式实现与android原生模块交互"
   onPress={() => {
     NativeModules.RNManagerModule.RNDeviceEvent();
   }}
   />

RN调用Android需要module名和方法名相同,而Android调用RN只需要方法名相同。

  1. RCTDeviceEventEmitter 事件方式
    • 优点:可任意时刻传递,Android主导控制。 可以用于多线程
  2. Callback 回调方式
    • 优点:JS调用,Android返回。
    • 缺点:CallBack为异步操作,返回时机不确定
  3. Promise
    • 优点:JS调用,Android返回。
    • 缺点:每次使用需要JS调用一次
  4. 直传常量数据(原生向RN)
    • 跨域传值,只能从原生端向RN端传递。RN端可通过NativeModules.[module名].[参数名] 的方式获取。

注意:RN层调用NativeModule层进行界面跳转时,需要设置FLAG_ACTIVITY_NEW_TASK标志

参考链接

Android原生与RN如何交互通信

RN与原生通讯(安卓篇)