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

更新時間：2017年07月24日 09:14:34 作者：秦磚

本篇文章主要介紹了深入理解React Native原生模塊與JS模塊通信的幾種方式，具有一定的參考價值，有興趣的可以了解一下

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

原理

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

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

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

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

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

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

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

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

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

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

屬性共享

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

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組件的生命周期內(nèi)通信呢，RCTRootView提供了appProperties這樣一種機制：

NSArray *imageList = @[@"http://foo.com/bar3.png",
     @"http://foo.com/bar4.png"];
rootView.appProperties = @{@"images" : imageList};

通知

OC中使用NSNotificationCenter向整個應用發(fā)送通知，所有對該通知感興趣的對象都會獲得該通知并執(zhí)行相應的動作。

React-Native中也提供有類似的機制:RCTEventEmitter。原生模塊繼承該類后，就可以向React-Native側(cè)發(fā)送通知，而React-Native就能夠接收到該通知，并處理一并傳送過來的數(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 = @"斷開連接中";
  break;
 case NEVPNStatusDisconnected:
 case NEVPNStatusInvalid:
  value = @"末連接";
  break;
 default:
  break;
   }
 if(value){
 [self sendEventWithName:@"VpnStatus" body:@{@"status":value}];
 }
}

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

小結(jié)

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

React Native通信機制詳解

淺析ReactNative之通信機制

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: