每種語言都有自己的設計理念、語法、運行環境，這也導致了不同語言間相互交流通信時必須要有中介來翻譯，如JAVA與C/C++通過JNI來交流、OC與C/C++需要在.mm文件混編、而JAVA/OC與Lua通信時需要通過C/C++語言來做中介。那么在React-Native中JSX是如何與底層模塊進行通信的呢？這里主要以iOS系統來做說明。
原理
通信本質上是信息的交流，具體到計算機語言則是數據的流動。應用中數據在React-Native與原生模塊間的流動與共享，完成了與用戶的交互，達成了應用的目標。React-Native與OC間通信的數據只能是下面的幾種類型(前為JS類型，后為OC類型)：
其它類型的數據需要通過一定的規則轉換成這幾種類型后(一般都會轉換成JSON串)再通信.
React-Native本質是通過JavaScriptCore.framework實現JS代碼與OC代碼間的互動。因此下面說的幾種方式在本質原理上都是相同的，不同的地方只是在于實現形式與方法的差別。
函數調用
在將原生模塊封裝并提供給React-Native使用時，可以通過RCT_EXPORT_METHOD()宏向React-Native側定義其可以調用的接口函數，完成兩模塊間的通信。
//定義了startVPN接口，React-Native將VPN的具體參數通過該接口傳入到原生模塊，開啟指定的VPNRCT_EXPORT_METHOD(startVPN:(NSDictionary*)config){ LSShadowSocksDataMode* mode = [[LSShadowSocksDataMode alloc] initWithDictionary:config]; [self.manager startVPN:mode];}除了傳入數據外，通過可以通過這種方式從原生側獲取數據。最容易想到的是通過返回值獲取，可惜的是RCT_EXPORT_METHOD宏不支持返回值，不過其提供了另外一種實現返回值的方式：
RCT_EXPORT_METHOD(isOpen:(RCTResponseSenderBlock)callback){ BOOL open = [self.manager status]; callback(@[[NSNull null], @[@(open)]]);}通過回調函數的形式實現返回值的效果，達到了數據交換的目的。
屬性共享
這種方式主要針對于UI控件來說的。React-Native中最基礎的UI類型是RCTRootView，該類有一個初始化方法initWithBridge:moduleName:initialProperties:，第三個參數initialProperties表示的是UI控件的初始屬性值，類型為NSDictionary，其最終會被同步到由第二個參數定義的React-Native類的props中，即完成了兩個模塊間的數據交流。
NSArray *imageList = @[@"http://foo.com/bar1.png", @"http://foo.com/bar2.png"];NSDictionary *props = @{@"images" : imageList};RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"ImageBrowserApp" initialProperties:props];import React, { Component } from 'react';import { AppRegistry, View, Image,} from 'react-native';class ImageBrowserApp extends Component { renderImage(imgURI) { return ( <Image source={{uri: imgURI}} /> ); } render() { return ( <View> {this.props.images.map(this.renderImage)} </View> ); }}AppRegistry.registerComponent('ImageBrowserApp', () => ImageBrowserApp);初始化接口只能在UI組件建立時使用，如果需要在UI組件的生命周期內通信呢，RCTRootView提供了appProperties這樣一種機制：
NSArray *imageList = @[@"http://foo.com/bar3.png", @"http://foo.com/bar4.png"];rootView.appProperties = @{@"images" : imageList};通知
OC中使用NSNotificationCenter向整個應用發送通知，所有對該通知感興趣的對象都會獲得該通知并執行相應的動作。
React-Native中也提供有類似的機制:RCTEventEmitter。原生模塊繼承該類后，就可以向React-Native側發送通知，而React-Native就能夠接收到該通知，并處理一并傳送過來的數據了。
-(void)vpnStatusChanged:(NSNotification*)notification{ NEVPNStatus status = [self.manager status]; NSString* value = nil; switch (status) { case NEVPNStatusReasserting: value = @"重新連接中"; break; case NEVPNStatusConnecting: value = @"連接中"; break; case NEVPNStatusConnected: value = @"已連接"; break; case NEVPNStatusDisconnecting: value = @"斷開連接中"; break; case NEVPNStatusDisconnected: case NEVPNStatusInvalid: value = @"末連接"; break; default: break; } if(value){ [self sendEventWithName:@"VpnStatus" body:@{@"status":value}]; }}這里將VPN的狀態通過通知發送到React-Native側，由React-Native將VPN的狀態顯示的UI界面上。
小結
這里只是簡單的介紹了兩種語言間幾種常用的通信方式，并沒有涉及到其背后的實現細節。對這方面感興趣的同學，不妨參閱下面的兩篇文章：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
