【移動(dòng)應(yīng)用開發(fā)技術(shù)】Android React Native原生模塊與JS模塊通信的方法總結(jié)

【移動(dòng)應(yīng)用開發(fā)技術(shù)】AndroidReactNative原生模塊與JS模塊通信的方法總結(jié)

AndroidReactNative原生模塊與JS模塊通信的方法總結(jié)前言：在做ReactNative開發(fā)的時(shí)候避免不了的需要原生模塊和JS之間進(jìn)行數(shù)據(jù)傳遞，這篇文章將向大家分享原生模塊向JS傳遞數(shù)據(jù)的幾種方式。方式一：通過Callbacks的方式說起Callbacks大家都不陌生，它是最常用的設(shè)計(jì)模式之一。無論是Java，Object-c，C#，還是JavaScript等都會(huì)看到Callbacks的身影。原生模塊支持Callbacks類型的參數(shù)，該Callbacks對(duì)應(yīng)JS中的function。在原生模塊中：在上述代碼中，measureLayout方法的參數(shù)中后兩個(gè)就是Callbacks，當(dāng)原生模塊處理成功時(shí)通過successCallback回調(diào)來告知JS處理成功的結(jié)果，當(dāng)原生模塊發(fā)生異常時(shí)，則通過errorCallback回調(diào)來JS處理異常。在JS模塊中：上述代碼，是在JS模塊中調(diào)用原生模塊的方法measureLayout，同時(shí)向它傳遞了四個(gè)參數(shù)，后兩個(gè)是function類型的參數(shù)用于接收原生模塊的處理結(jié)果。通過上述的方式，JS調(diào)用原生模塊的measureLayout方法，原生模塊則通過errorCallback與successCallbackCallbacks來將處理結(jié)果傳遞到JS。這種“Youcallme,Iwillcallback”，的方式小伙伴們都看懂了吧。

方式二：通過Promises的方式Promises是ES6的一個(gè)新的特性，在ReactNative中你會(huì)看到Promises的大量使用。

原生模塊也是支持Promises的，這對(duì)喜歡使用Promises的小伙伴則是一個(gè)很好的消息。在原生模塊中：上述代碼中，measureLayout方法接收的最后一個(gè)為Promise，當(dāng)相應(yīng)的處理結(jié)果出來之后原生模塊通過調(diào)用Promise的相應(yīng)方法來向JS模塊傳遞處理成功，或處理失敗的數(shù)據(jù)。提示：在原生模塊中Promise類型的參數(shù)要放在最后一位，這樣JS調(diào)用的時(shí)候才能返回一個(gè)Promise。

在JS模塊中：在上述代碼中，通過ES7的新特性async/await來修飾了test方法，來以同步方式調(diào)用原生模塊的measureLayout方法，如果原生模塊處理成功，

那么JS中relativeX,relativeY,width,height會(huì)獲得相應(yīng)的值，如果原生模塊處理失敗，則會(huì)拋出異常。如果，不希望以同步的形式調(diào)用，可以這樣寫：以上就是通過Promises的方式向JS傳遞數(shù)據(jù)的方式，小伙伴們看懂了嗎。上述兩種方式，通過Callbacks的方式與通過Promises的方式，都可以向JS模塊傳遞數(shù)據(jù)，但都是只能傳遞一次。

如果，你需要多次向JS模塊傳遞數(shù)據(jù)(如：按鍵事件)上述方式還是不夠好，下面就像大家分享可以多次傳遞數(shù)據(jù)的方式。方式三：通過發(fā)送事件的方式原生模塊支持另外一種向JS模塊傳遞數(shù)據(jù)的方式，通過發(fā)送事件的方式。原生模塊，可以向JS傳遞事件而不要而不需要直接的調(diào)用，就像Android中的廣播，iOS中的通知中心。下面就向大家演示通過RCTDeviceEventEmitter，來向JS傳遞事件。在原生模塊中：上述代碼向JS模塊發(fā)送了一個(gè)名為“onScanningResult”的事件，并攜帶了“params”作為參數(shù)。在JS模塊中：下面是在JS代碼中進(jìn)行監(jiān)聽原生模塊發(fā)出的名為“onScanningResult”的事件。在JS中通過DeviceEventEmitter注冊(cè)監(jiān)聽了名為“onScanningResult”的事件，當(dāng)原生模塊發(fā)出名為“onScanningResult”的事件后，綁定在該事件上的onScanningResult=(e)會(huì)被回調(diào)。

然后通過e.result就可獲得事件所攜帶的數(shù)據(jù)。心得：如果在JS中有多處注冊(cè)了onScanningResult事件，那么當(dāng)原生模塊發(fā)出事件后，這幾個(gè)地方會(huì)同時(shí)收到該事件。不過大家也可以通過DeviceEventEmitter.removeListener('onScanningResult',this.onScanningResult)來移除對(duì)名為“onScanningResult”事件的監(jiān)聽。

另外，JS模塊也支持通