React Native橋接Android模塊-多線程RNDeviceEventEmitter方式

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標誌

相關鏈接

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回調

參考鏈接

Android原生與RN如何交互通信
RN與原生通訊(安卓篇)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章