React Native桥接Android模块-多线程RNDeviceEventEmitter方式

最新推荐文章于 2024-08-13 08:28:31 发布

Donkey..

最新推荐文章于 2024-08-13 08:28:31 发布

阅读量1.1k

点赞数

分类专栏： React Native学习笔记文章标签： android react native

本文链接：https://blog.csdn.net/qq_40595341/article/details/104610521

版权

React Native学习笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

React Native桥接Android模块-多线程RNDeviceEventEmitter方式

1.创建模块类

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

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

	private  int i ;

    @ReactMethod
    public void  RNThreadDeviceEvent(){
        new Thread(new Runnable() {
            @Override
            public void run() {
                for ( i=0 ; i<=10;i++) {
                    try {
                        Thread.sleep(1000); // 模拟耗时操作
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    Log.e("线程输出的值", i+"");
                    if(i==10){
                        getReactApplicationContext().getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                                .emit("sendThreadDeviceEvent",i);
                    }
                }
            }
        }).start();
    }

}

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('sendThreadDeviceEvent', (value)=>{console.log('DeviceEventEmitter -->',value)});
  }

<Button 
   title="多线程RNDeviceEventEmitter方式实现与android原生模块交互"
   onPress={() => {
     NativeModules.RNManagerModule.RNThreadDeviceEvent();
   }}
   />

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标志