建站
咨詢
售后
建站咨詢
新聞中心
一用到跨平臺的引擎必然要有引擎與各平臺原生進(jìn)行交互通信的需要。那么Himi先講解React Native與iOS之間的通信交互。
成都創(chuàng)新互聯(lián)擁有一支富有激情的企業(yè)網(wǎng)站制作團(tuán)隊(duì)，在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)深耕10余年，專業(yè)且經(jīng)驗(yàn)豐富。10余年網(wǎng)站優(yōu)化營銷經(jīng)驗(yàn)，我們已為數(shù)千家中小企業(yè)提供了網(wǎng)站建設(shè)、成都做網(wǎng)站解決方案，按需規(guī)劃網(wǎng)站，設(shè)計(jì)滿意，售后服務(wù)無憂。所有客戶皆提供一年免費(fèi)網(wǎng)站維護(hù)!
本篇主要分為兩部分講解：(關(guān)于其中講解的OC語法等不介紹，不懂的請自行學(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#import "RCTBridgeModule.h" @interface TestOJO : NSObject @end
引入：#import “RCTBridgeModule.h” 且使用
3. 為了實(shí)現(xiàn)RCTBridgeModule協(xié)議，類需要包含RCT_EXPORT_MODULE()宏(這個(gè)宏也可以添加一個(gè)參數(shù)用來指定在Javascript中訪問這個(gè)模塊的名字。如果你不指定，默認(rèn)就會使用這個(gè)Objective-C類的名字。)
4. 在TestOJO.m中添加如下：
RCT_EXPORT_MODULE();
//橋接到Javascript的方法返回值類型必須是void。React Native的橋接操作是異步的，所以要返回結(jié)果給Javascript，必須通過回調(diào)或者觸發(fā)事件來進(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()宏來實(shí)現(xiàn)：
j2oFun1：函數(shù)名，后續(xù)是兩個(gè)參數(shù)，分別是NSString 和 int 類型數(shù)據(jù)。
調(diào)用成功后，我們輸出這兩個(gè)傳來的值到控制臺。
注意：Javascript調(diào)用的OC函數(shù)，此函數(shù)返回值類型必須是void。由于React Native的橋接操作是異步的，所以要返回結(jié)果給Javascript，必須通過回調(diào)參數(shù)進(jìn)行 后續(xù)詳細(xì)講解。
從js傳來的參數(shù)我們可以依靠自動類型轉(zhuǎn)換的特性，跳過手動的類型轉(zhuǎn)換（RCTConvert，下面詳細(xì)介紹），在定義函數(shù)參數(shù)類型時(shí)，直接寫上對應(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注冊進(jìn)來的模塊取出）
TestOJO.j2oFun1(‘Himi’, 12321);(調(diào)用模塊中的對應(yīng)函數(shù)，且將參數(shù)進(jìn)行傳入)
6. 我們來看一段復(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ù)，用來接收一個(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. 我們下面來利用回調(diào)參數(shù)來得到訪問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ò)誤對象（沒有發(fā)生錯(cuò)誤的時(shí)候?yàn)閚ull），而剩下的部分是函數(shù)的返回值。
下面我們來看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];下面來看JS中定義OC調(diào)用的函數(shù)：
其實(shí)所謂OC能響應(yīng)JS，是JS進(jìn)行了對應(yīng)函數(shù)的綁定監(jiān)聽。因此我們需要利用 NativeAppEventEmitter 組件，利用其addListener進(jìn)行注冊監(jiān)聽！因此我們需要引入進(jìn)來這個(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)聽，一定要對應(yīng)有取消監(jiān)聽！要保持一一對應(yīng)的好習(xí)慣。
且通常取消監(jiān)聽都在componentWillUnmount函數(shù)中進(jìn)行。如下：
componentWillUnmount(){
o2cFun.remove();
}其中對于原理并沒有詳細(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#import "RCTBridgeModule.h" @interface TestOJO : NSObject @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ù)，用來接收一個(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ā)事件來進(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ù)是為了測試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}];
}
@endMain.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)
);
// 千萬不要忘記忘記取消訂閱, 通常在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 (
Himi React Native 系列教程
{
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
{
TestOJO.emitterO2J();
}}
style={styles.himiTextStyle}>JS -> OC -> JS
);
}
};
var styles = StyleSheet.create({
himiTextStyle:{
backgroundColor:'#eee',
color:'#f00',
fontSize:30,
marginTop:70,
},
}); 下面是運(yùn)行效果：（點(diǎn)擊看動態(tài)圖，主要看演示過程與控制臺輸出哦！）
注意：
1.點(diǎn)擊JS->OC 后，會調(diào)用三個(gè)函數(shù)哦
2.點(diǎn)擊JS->OC->JS, 先是通過JS->OC的臨時(shí)函數(shù)，觸發(fā)OC->JS的過程！
網(wǎng)頁標(biāo)題：【REACTNATIVE系列教程之十二】REACTNATIVE(JS/ES)與IOS(OBJECT-C)交互通信
網(wǎng)頁鏈接：http://www.ef60e0e.cn/article/pjdggo.html
