溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
每種語言都有自己的設計理念、語法、運行環境，這也導致了不同語言間相互交流通信時必須要有中介來翻譯，如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的具體參數通過該接口傳入到原生模塊，開啟指定的VPN
RCT_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 = @[@"https://cache.yisu.com/upload/information/20200622/114/70935.png",
@"https://cache.yisu.com/upload/information/20200622/114/70936.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 = @[@"https://cache.yisu.com/upload/information/20200622/114/70937.png",
@"https://cache.yisu.com/upload/information/20200622/114/70939.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界面上。
小結
這里只是簡單的介紹了兩種語言間幾種常用的通信方式，并沒有涉及到其背后的實現細節。對這方面感興趣的同學，不妨參閱下面的兩篇文章：
React Native通信機制詳解
淺析ReactNative之通信機制
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
