深入理解React Native原生模塊與JS模塊通信的幾種方式

每種語(yǔ)言都有自己的設(shè)計(jì)理念、語(yǔ)法、運(yùn)行環(huán)境，這也導(dǎo)致了不同語(yǔ)言間相互交流通信時(shí)必須要有中介來(lái)翻譯，如JAVA與C/C++通過(guò)JNI來(lái)交流、OC與C/C++需要在.mm文件混編、而JAVA/OC與Lua通信時(shí)需要通過(guò)C/C++語(yǔ)言來(lái)做中介。那么在React-Native中JSX是如何與底層模塊進(jìn)行通信的呢？這里主要以iOS系統(tǒng)來(lái)做說(shuō)明。

原理

通信本質(zhì)上是信息的交流，具體到計(jì)算機(jī)語(yǔ)言則是數(shù)據(jù)的流動(dòng)。應(yīng)用中數(shù)據(jù)在React-Native與原生模塊間的流動(dòng)與共享，完成了與用戶的交互，達(dá)成了應(yīng)用的目標(biāo)。React-Native與OC間通信的數(shù)據(jù)只能是下面的幾種類型(前為JS類型，后為OC類型)：

1. string-NSString
2. number - int/NSInteger/float/double/NSNumber
3. boolean - BOOL/NSNumber
4. array - NSArray
5. object - NSDictionary(NSString型key, value可以為這里的其它類型)
6. func - RCTResponseSenderBlock

其它類型的數(shù)據(jù)需要通過(guò)一定的規(guī)則轉(zhuǎn)換成這幾種類型后(一般都會(huì)轉(zhuǎn)換成JSON串)再通信.

React-Native本質(zhì)是通過(guò)JavaScriptCore.framework實(shí)現(xiàn)JS代碼與OC代碼間的互動(dòng)。因此下面說(shuō)的幾種方式在本質(zhì)原理上都是相同的，不同的地方只是在于實(shí)現(xiàn)形式與方法的差別。

函數(shù)調(diào)用

在將原生模塊封裝并提供給React-Native使用時(shí)，可以通過(guò)RCT_EXPORT_METHOD()宏向React-Native側(cè)定義其可以調(diào)用的接口函數(shù)，完成兩模塊間的通信。

//定義了startVPN接口，React-Native將VPN的具體參數(shù)通過(guò)該接口傳入到原生模塊，開(kāi)啟指定的VPN
RCT_EXPORT_METHOD(startVPN:(NSDictionary*)config)
{
 LSShadowSocksDataMode* mode = [[LSShadowSocksDataMode alloc] initWithDictionary:config];
 [self.manager startVPN:mode];
}

除了傳入數(shù)據(jù)外，通過(guò)可以通過(guò)這種方式從原生側(cè)獲取數(shù)據(jù)。最容易想到的是通過(guò)返回值獲取，可惜的是RCT_EXPORT_METHOD宏不支持返回值，不過(guò)其提供了另外一種實(shí)現(xiàn)返回值的方式：

RCT_EXPORT_METHOD(isOpen:(RCTResponseSenderBlock)callback)
{
 BOOL open = [self.manager status];
 callback(@[[NSNull null], @[@(open)]]);
}

通過(guò)回調(diào)函數(shù)的形式實(shí)現(xiàn)返回值的效果，達(dá)到了數(shù)據(jù)交換的目的。

屬性共享

這種方式主要針對(duì)于UI控件來(lái)說(shuō)的。React-Native中最基礎(chǔ)的UI類型是RCTRootView，該類有一個(gè)初始化方法initWithBridge:moduleName:initialProperties:，第三個(gè)參數(shù)initialProperties表示的是UI控件的初始屬性值，類型為NSDictionary，其最終會(huì)被同步到由第二個(gè)參數(shù)定義的React-Native類的props中，即完成了兩個(gè)模塊間的數(shù)據(jù)交流。

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組件建立時(shí)使用，如果需要在UI組件的生命周期內(nèi)通信呢，RCTRootView提供了appProperties這樣一種機(jī)制：

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向整個(gè)應(yīng)用發(fā)送通知，所有對(duì)該通知感興趣的對(duì)象都會(huì)獲得該通知并執(zhí)行相應(yīng)的動(dòng)作。

React-Native中也提供有類似的機(jī)制:RCTEventEmitter。原生模塊繼承該類后，就可以向React-Native側(cè)發(fā)送通知，而React-Native就能夠接收到該通知，并處理一并傳送過(guò)來(lái)的數(shù)據(jù)了。

-(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 = @"斷開(kāi)連接中";
  break;
 case NEVPNStatusDisconnected:
 case NEVPNStatusInvalid:
  value = @"末連接";
  break;
 default:
  break;
   }
 if(value){
 [self sendEventWithName:@"VpnStatus" body:@{@"status":value}];
 }
}

這里將VPN的狀態(tài)通過(guò)通知發(fā)送到React-Native側(cè)，由React-Native將VPN的狀態(tài)顯示的UI界面上。

小結(jié)

這里只是簡(jiǎn)單的介紹了兩種語(yǔ)言間幾種常用的通信方式，并沒(méi)有涉及到其背后的實(shí)現(xiàn)細(xì)節(jié)。對(duì)這方面感興趣的同學(xué)，不妨參閱下面的兩篇文章：

React Native通信機(jī)制詳解

淺析ReactNative之通信機(jī)制

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。