深入理解React Native原生模块与JS模块通信的几种方

//定义了startVPN接口，React-Native将VPN的具体参数通过该接口传入到原生模块，开启指定的VPN
RCT_EXPORT_METHOD(startVPN:(NSDictionary)config)
{
 LSShadowSocksDataMode mode = [[LSShadowSocksDataMode alloc] initWithDictionary:config];
 [self.manager startVPN:mode];
}

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

NSArray imageList = @[@"http://foo./bar1.png",
     @"http://foo./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);

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

-(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}];
 }
}