【REACT NATIVE 系列教程之十二】REACT NATIVE(JS/ES)與IOS(OBJECT-C)交互通信

一用到跨平臺(tái)的引擎必然要有引擎與各平臺(tái)原生進(jìn)行交互通信的需要。那么Himi先講解React Native與iOS之間的通信交互。

       本篇主要分為兩部分講解：(關(guān)于其中講解的OC語(yǔ)法等不介紹，不懂的請(qǐng)自行學(xué)習(xí))

       1. React Native 訪問iOS 

       2. iOS訪問React Native

    一：React Native 訪問iOS

1. 我們想要JS調(diào)用OC函數(shù)，就要實(shí)現(xiàn)一個(gè)“RCTBridgeModule”協(xié)議的Objective-C類

所以首先我們先創(chuàng)建一個(gè)oc新類，  Himi這里起名為：TestOJO  (O: object-c, J: javaScript )

2. TestOJO.h

#import <Foundation/Foundation.h>
#import "RCTBridgeModule.h"
 
@interface TestOJO : NSObject  <RCTBridgeModule>
 
@end

引入：#import “RCTBridgeModule.h”   且使用 <RCTBridgeModule> 接口，

3. 為了實(shí)現(xiàn)RCTBridgeModule協(xié)議，類需要包含RCT_EXPORT_MODULE()宏(這個(gè)宏也可以添加一個(gè)參數(shù)用來(lái)指定在Javascript中訪問這個(gè)模塊的名字。如果你不指定，默認(rèn)就會(huì)使用這個(gè)Objective-C類的名字。)

4. 在TestOJO.m中添加如下：

RCT_EXPORT_MODULE();
//橋接到Javascript的方法返回值類型必須是void。React Native的橋接操作是異步的，所以要返回結(jié)果給Javascript，必須通過回調(diào)或者觸發(fā)事件來(lái)進(jìn)行
RCT_EXPORT_METHOD(j2oFun1:(NSString *)dataString dateNumber:(int)dateNumber)
{
    NSLog(@"js call iOS function j2oFun1\n dataString: %@ |dateNumber :%d",dataString,dateNumber);
}

想要將oc的函數(shù)導(dǎo)出給js進(jìn)行調(diào)用，那么就需要進(jìn)行聲明。聲明通過RCT_EXPORT_METHOD()宏來(lái)實(shí)現(xiàn)：

j2oFun1：函數(shù)名，后續(xù)是兩個(gè)參數(shù)，分別是NSString 和 int 類型數(shù)據(jù)。

調(diào)用成功后，我們輸出這兩個(gè)傳來(lái)的值到控制臺(tái)。

注意：Javascript調(diào)用的OC函數(shù)，此函數(shù)返回值類型必須是void。由于React Native的橋接操作是異步的，所以要返回結(jié)果給Javascript，必須通過回調(diào)參數(shù)進(jìn)行 后續(xù)詳細(xì)講解。

從js傳來(lái)的參數(shù)我們可以依靠自動(dòng)類型轉(zhuǎn)換的特性，跳過手動(dòng)的類型轉(zhuǎn)換（RCTConvert，下面詳細(xì)介紹），在定義函數(shù)參數(shù)類型時(shí)，直接寫上對(duì)應(yīng)想要的數(shù)據(jù)類型，例如NSData等。

5. 下面看js調(diào)用的代碼段：

var TestOJO = require('react-native').NativeModules.TestOJO;
TestOJO.j2oFun1('Himi', 12321);

var TestOJO=require(‘react-native’).NativeModules.TestOJO;（將OC注冊(cè)進(jìn)來(lái)的模塊取出）

TestOJO.j2oFun1(‘Himi’, 12321);(調(diào)用模塊中的對(duì)應(yīng)函數(shù)，且將參數(shù)進(jìn)行傳入)

6. 我們來(lái)看一段復(fù)雜的數(shù)據(jù)通信

OC 代碼段（導(dǎo)出函數(shù)）：

#import "RCTConvert.h"
RCT_EXPORT_METHOD(j2oFun2:(NSDictionary *)details)
{
  NSString *name = [RCTConvert NSString:details[@"name"]];
  NSNumber *age = [RCTConvert NSNumber:details[@"age"]];
  NSArray * array =[RCTConvert NSArray:details[@"array"]];
  NSLog(@"js call iOS function j2oFun2\n name: %@ | age :%@", name, [age stringValue]);
  
  for (int i = 0; i<[array count]; i++) {
    NSLog(@"array: 第%d個(gè)元素:%@",i,array[i]);
  }
}

需要注意的是，引入了”RCTConvert”類,作用：

RCTConvert提供了一系列輔助函數(shù)，用來(lái)接收一個(gè)JSON值并轉(zhuǎn)換到原生Objective-C類型或類。

JS代碼段：（調(diào)用OC函數(shù)）

TestOJO.j2oFun2({
    name:'Himi',
    age:12,
    array:[
          'hi,Himi','i,m','a array!'
    ]
 });

7. 我們下面來(lái)利用回調(diào)參數(shù)來(lái)得到訪問OC的函數(shù)得到其返回值

RCT_EXPORT_METHOD(j2oCallbackEvent:(NSString *)jsString callback:(RCTResponseSenderBlock)callback)
{
  NSLog(@"js call iOS function:  j2oCallbackEvent \n jsString:%@",jsString);
  NSArray *events = [[NSArray alloc] initWithObjects:@"Himi",@"12321", nil];
  callback(@[[NSNull null], events]);
}

RCTResponseSenderBlock 是種特殊的參數(shù)類型——回調(diào)函數(shù)，通過此參數(shù)可以實(shí)現(xiàn)當(dāng)JS訪問的OC函數(shù)后，并能將此OC函數(shù)的返回值傳遞給JS。

RCTResponseSenderBlock 只接受一個(gè)參數(shù)（傳遞給JavaScript回調(diào)函數(shù)的參數(shù)數(shù)組）

callback函數(shù)：第一個(gè)參數(shù)是一個(gè)錯(cuò)誤對(duì)象（沒有發(fā)生錯(cuò)誤的時(shí)候?yàn)閚ull），而剩下的部分是函數(shù)的返回值。

下面我們來(lái)看JS調(diào)用代碼段：

TestOJO.j2oCallbackEvent('Himi',(error,callBackEvents)=>{
   if (error) {
       console.error(error);
   } else {
       Alert.alert('J2O帶返回值', '數(shù)組的三個(gè)值：\n[0]:'+callBackEvents[0]+'\n[1]:'+callBackEvents[1]+'\n[2]:'+callBackEvents[2]);
   }
});

二： iOS訪問React Native

1.  我們?nèi)绻胍狾C訪問JS，給JavaScript發(fā)送事件通知，我們需要使用RCTEventDispatcher的函數(shù)，與RCTBridge的實(shí)例

因此我們需要先做準(zhǔn)備，TestOJO.h：

#import "RCTEventDispatcher.h"
@synthesize bridge = _bridge;

bridge: 是RCTBridge 的實(shí)例，且在我們使用的接口 RCTBridgeModule中。

OC訪問JS的代碼段：

[self.bridge.eventDispatcher sendAppEventWithName:@"eventName" body:@{@"name":@"Himi",@"age": @12}];

第一個(gè)參數(shù)：事件名

第二個(gè)參數(shù)(body)：傳入的參數(shù)

其中@{}是定義不可變的字典的快捷實(shí)例方式，因此我們也可以改成如下形式：

NSDictionary * direct =@{@"name": @"Himi",@"age": @12};
    [self.bridge.eventDispatcher sendAppEventWithName:@"eventName" body:direct];

下面來(lái)看JS中定義OC調(diào)用的函數(shù)：

其實(shí)所謂OC能響應(yīng)JS，是JS進(jìn)行了對(duì)應(yīng)函數(shù)的綁定監(jiān)聽。因此我們需要利用 NativeAppEventEmitter 組件，利用其addListener進(jìn)行注冊(cè)監(jiān)聽！因此我們需要引入進(jìn)來(lái)這個(gè)模塊，

import {
  ...
  NativeAppEventEmitter
  ...
 } from 'react-native';
var o2cFun = NativeAppEventEmitter.addListener(
  'eventName',
  (para) => Alert.alert('被OC觸發(fā)','字典數(shù)據(jù):\n name:'+para.name+'\n age:'+para.age)
);

var o2cFun : 將綁定好的監(jiān)聽事件引用交給此變量保存。

addListener：

第一個(gè)參數(shù)：事件名

第二個(gè)參數(shù)：響應(yīng)函數(shù)

注意：利用addListener進(jìn)行監(jiān)聽，一定要對(duì)應(yīng)有取消監(jiān)聽！要保持一一對(duì)應(yīng)的好習(xí)慣。

且通常取消監(jiān)聽都在componentWillUnmount函數(shù)中進(jìn)行。如下：

  componentWillUnmount(){
    o2cFun.remove();
  }

其中對(duì)于原理并沒有詳細(xì)的介紹，這里推薦兩篇文章，童鞋們可以詳細(xì)的閱讀一下，這里不贅述：

http://www.jianshu.com/p/203b91a77174

http://reactnative.cn/docs/0.21/native-modules-ios.html#content

下面給出源碼：

TestOJO.h：

//
//  TestOJO.h
//  MyProject
//
//  Created by Himi on 16/6/2.
//  Copyright  2016年 Facebook. All rights reserved.
//
#import <Foundation/Foundation.h>
#import "RCTBridgeModule.h"
@interface TestOJO : NSObject  <RCTBridgeModule>
@end

TestOJO.m：

//
//  TestOJO.m
//  MyProject
//
//  Created by Himi on 16/6/2.
//  Copyright  2016年 Facebook. All rights reserved.
//
#import "TestOJO.h"
//RCTConvert類支持的的類型也都可以使用,RCTConvert還提供了一系列輔助函數(shù)，用來(lái)接收一個(gè)JSON值并轉(zhuǎn)換到原生Objective-C類型或類。
#import "RCTConvert.h"
//本地模塊也可以給JavaScript發(fā)送事件通知。最直接的方式是使用eventDispatcher
#import "RCTEventDispatcher.h"
@implementation TestOJO
//====================================[JS ->  OC]=======================================
RCT_EXPORT_MODULE();
//橋接到Javascript的方法返回值類型必須是void。React Native的橋接操作是異步的，所以要返回結(jié)果給Javascript，必須通過回調(diào)或者觸發(fā)事件來(lái)進(jìn)行
RCT_EXPORT_METHOD(j2oFun1:(NSString *)dataString dateNumber:(int)dateNumber)
{
    NSLog(@"js call iOS function j2oFun1\n dataString: %@ |dateNumber :%d",dataString,dateNumber);
}
RCT_EXPORT_METHOD(j2oFun2:(NSDictionary *)details)
{
  NSString *name = [RCTConvert NSString:details[@"name"]];
  NSNumber *age = [RCTConvert NSNumber:details[@"age"]];
  NSArray * array =[RCTConvert NSArray:details[@"array"]];
  NSLog(@"js call iOS function j2oFun2\n name: %@ | age :%@", name, [age stringValue]);
  
  for (int i = 0; i<[array count]; i++) {
    NSLog(@"array: 第%d個(gè)元素:%@",i,array[i]);
  }
  
}
//帶回調(diào)函數(shù) RCTResponseSenderBlock ，提供將返回值傳回給js
//RCTResponseSenderBlock 只接受一個(gè)參數(shù)->傳遞給JavaScript回調(diào)函數(shù)的參數(shù)數(shù)組
RCT_EXPORT_METHOD(j2oCallbackEvent:(NSString *)jsString callback:(RCTResponseSenderBlock)callback)
{
  NSLog(@"js call iOS function:  j2oCallbackEvent \n jsString:%@",jsString);
  NSArray *events = [[NSArray alloc] initWithObjects:@"Himi",@"12321", nil];
  callback(@[[NSNull null], events]);
}
//====================================[OC ->  JS]=======================================
@synthesize bridge = _bridge;
//此函數(shù)是為了測(cè)試OC->JS過程，觸發(fā)事件的函數(shù)
RCT_EXPORT_METHOD(emitterO2J)
{
  [self ocCallJsFun];
}
- (void)ocCallJsFun
{
    NSDictionary * direct =@{@"name": @"Himi",@"age": @12};
    [self.bridge.eventDispatcher sendAppEventWithName:@"eventName" body:direct];
  
  //  [self.bridge.eventDispatcher sendAppEventWithName:@"eventName" body:@{@"name":@"Himi",@"age": @12}];
  
}
@end

Main.js:

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  Alert,
  NativeAppEventEmitter,//引用NativeAppEventEmitter組件進(jìn)行監(jiān)聽Native端派發(fā)的事件
 } from 'react-native';
var TestOJO = require('react-native').NativeModules.TestOJO;
var o2cFun = NativeAppEventEmitter.addListener(
  'eventName',
  (para) => Alert.alert('被OC觸發(fā)','字典數(shù)據(jù):\n name:'+para.name+'\n age:'+para.age)
);
// 千萬(wàn)不要忘記忘記取消訂閱, 通常在componentWillUnmount函數(shù)中實(shí)現(xiàn)。
// o2cFun.remove();
export default class Main extends Component {
	constructor(props) {
		super(props);
		this.state = {
      selectedTab:'home'
    };
	}
  componentWillUnmount(){
    o2cFun.remove();
  }
  render() {
     return (
       	<View style={{flex: 1, alignItems: 'center'}}>
         <Text style={styles.himiTextStyle}>Himi React Native 系列教程</Text>
         <Text
           onPress={()=>{
              TestOJO.j2oFun1('Himi', 12321);
              TestOJO.j2oFun2({
                name:'Himi',
                age:12,
                array:[
                  'hi,Himi','i,m','a array!'
                ]
              });
              TestOJO.j2oCallbackEvent('Himi',(error,callBackEvents)=>{
                if (error) {
                  console.error(error);
                } else {
                  Alert.alert('J2O帶返回值', '數(shù)組的三個(gè)值：\n[0]:'+callBackEvents[0]+'\n[1]:'+callBackEvents[1]+'\n[2]:'+callBackEvents[2]);
                }
              });
           }}
           style={styles.himiTextStyle}>JS -> OC
         </Text>
         <Text
           onPress={()=>{
              TestOJO.emitterO2J();
           }}
           style={styles.himiTextStyle}>JS -> OC -> JS
         </Text>
        </View>
     );
  }
};
var styles = StyleSheet.create({
  himiTextStyle:{
    backgroundColor:'#eee',
    color:'#f00',
    fontSize:30,
    marginTop:70,
  },
});

下面是運(yùn)行效果：（點(diǎn)擊看動(dòng)態(tài)圖，主要看演示過程與控制臺(tái)輸出哦！）

注意：

1.點(diǎn)擊JS->OC 后，會(huì)調(diào)用三個(gè)函數(shù)哦

2.點(diǎn)擊JS->OC->JS, 先是通過JS->OC的臨時(shí)函數(shù)，觸發(fā)OC->JS的過程！