React Native 原生與JS之間事件綁定註冊 作用在於原生可以直接調用JS的方法

1 前面我們已經說過了RN混合開發中,原生如何調用JS的各個頁面 JS如何調用原生的activity,以及JS中如何調用原生的方法.
2 這些已經比較簡單的,這一節主要說,我們如果在原生JAVA代碼中,某個時刻非常想響應JS的某個方法怎麼辦.
目前,我還沒有瞭解到如何可以直接調用JS的某個方法,我的做法是採用事件響應的方式,就跟Android原生的按鈕綁定了某個事件一樣,如果收到這個訊息,JS端就去執行這個操作.下面具體說一下. 1 JAVA端註冊事件

如何註冊時間呢,

 public static void sendEvent(ReactContext reactContext, String eventName, @Nullable WritableMap paramss)    {        if(reactContext!=null){                  reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, paramss);        }    }

在這段代碼裡面,是一個發送到JS端事件的方法,其中reactContext這個context,是在ReactModule這個類中產生的.它繼承ReactContextBaseJavaModule這個類.瞭解的話應該清楚,
我們可以在需要的類中,設定靜態變數,然後在ReactModule這個類的構造方法中傳遞這個對象.

    public static ReactContext mReactContext;

eventName這個參數,是事件的名稱.paramss這個參數是事件的參數.

2 JAVA端發送訊息

我們要想在JAVA端調用JS的方法,也就是通過訊息來判斷應該調用哪個方法,跟上節說的,調用JS的activity一樣,JS只有一個activity,但是它有很多的頁面,具體顯示哪一個頁面,可以通過我們傳遞的參數來區分.

WritableMap event = Arguments.createMap();event.putString("type","abc");sendEvent(mReactContext, "ABC",event);

前兩行代碼是設定參數,最後一個方法是發送資料.
下邊我們來看一下JS端是如何接收和處理的. 3 JS端接收和處理

DeviceEventEmitter這是JS端設定註冊事件,需要用到的組件.

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

看到這段代碼,應該比較容易理解.我們在JS組件生命週期開始的部分,註冊接收的事件.

    this.ABC = DeviceEventEmitter.addListener('ABC', function (e: Event) {      if ('abc' == e.type) {        that.setState({ ABC: true });      }    });

這段代碼可以寫在componentDidMount這個生命週期之中,addListener(‘ABC’, 這個地方的ABC與sendEvent(mReactContext, “ABC”,event);這裡面的ABC是對應的.
if (‘abc’ == e.type) {這個地方的type和abc與event.putString(“type”,”abc”);這個裡面的是對應的,相比這樣就更加清楚了.
這樣的話,當JAVA端發了訊息,我在JS端就收到了,收到之後,想執行什麼方法就是我的事了,這個需求就可以滿足了.