React Native知识12-与原生交互
一:原生传递参数给React Native
1:原生给React Native传参
原生给JS传数据,主要依靠属性。
通过initialProperties,这个RCTRootView的初始化函数的参数来完成。
RCTRootView还有一个appProperties属性,修改这个属性,JS端会调用相应的渲染方法。
我们使用RCTRootView将React Natvie视图封装到原生组件中。RCTRootView是一个UIView容器,承载着React Native应用。同时它也提供了一个联通原生端和被托管端的接口。
通过RCTRootView的初始化函数你可以将任意属性传递给React Native应用。参数initialProperties必须是NSDictionary的一个实例。这一字典参数会在内部被转化为一个可供JS组件调用的JSON对象。
原生oc代码:
NSURL *jsCodeLocation; jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil]; NSArray *imageList = @[@"http://foo.com/bar1.png",
@"http://foo.com/bar2.png"]; NSDictionary *wjyprops = @{@"images" : imageList}; RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"ReactNativeProject"
initialProperties:wjyprops
launchOptions:launchOptions];
js处理代码:
'use strict';
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);
注意:不管OC中关于initialProperties的字典名字叫什么,在JS中都是this.props开头,然后接下来才是字典里面的key名字;下面是打印出来的值;
{"rootTag":,"initialProps":{"images":["http://foo.com/bar1.png","http://foo.com/bar2.png"]}}.
2:使用appProperties进行传递,原生给React Native传参
RCTRootView同样提供了一个可读写的属性appProperties。在appProperties设置之后,React Native应用将会根据新的属性重新渲染。当然,只有在新属性和之前的属性有区别时更新才会被触发。
NSArray *imageList = @[@"http://foo.com/bar3.png",
@"http://foo.com/bar4.png"];
rootView.appProperties = @{@"images" : imageList};
你可以随时更新属性,但是更新必须在主线程中进行,读取则可以在任何线程中进行。
更新属性时并不能做到只更新一部分属性。我们建议你自己封装一个函数来构造属性。
注意:目前,最顶层的RN组件(即registerComponent方法中调用的那个)的componentWillReceiveProps和componentWillUpdateProps方法在属性更新后不会触发。但是,你可以通过componentWillMount访问新的属性值。
二:React Native执行原生的方法及回调
1:React Native执行原生的方法
.h的文件内容:
#import <Foundation/Foundation.h>
#import <RCTBridgeModule.h> @interface wjyTestManager : NSObject<RCTBridgeModule> @end
注意:在React Native中,一个“原生模块”就是一个实现了“RCTBridgeModule”协议的Objective-C类,其中RCT是ReaCT的缩写。
.m的文件内容:
#import "wjyTestManager.h" @implementation wjyTestManager RCT_EXPORT_MODULE(); RCT_EXPORT_METHOD(doSomething:(NSString *)aString withA:(NSString *)a)
{
NSLog(@"%@,%@",aString,a);
} @end
注意:为了实现RCTBridgeModule协议,你的类需要包含RCT_EXPORT_MODULE()宏。这个宏也可以添加一个参数用来指定在Javascript中访问这个模块的名字。如果你不指定,默认就会使用这个Objective-C类的名字。你必须明确的声明要给Javascript导出的方法,否则React Native不会导出任何方法。OC中声明要给Javascript导出的方法,通过RCT_EXPORT_METHOD()宏来实现:
js相关代码如下:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Alert,
TouchableHighlight,
} from 'react-native'; import {
NativeModules,
NativeAppEventEmitter
} from 'react-native'; var CalendarManager = NativeModules.wjyTestManager; class ReactNativeProject extends Component {
render() {
return (
<TouchableHighlight onPress={()=>CalendarManager.doSomething('sdfsdf','sdfsdfs')}>
<Text style={styles.text}
>点击 </Text>
</TouchableHighlight> );
}
} const styles = StyleSheet.create({
text: {
flex: ,
marginTop: ,
fontWeight: 'bold'
},
}); AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject);
注意:要用到NativeModules则要引入相应的命名空间import { NativeModules } from 'react-native’;然后再进行调用CalendarManager.doSomething('sdfsdf','sdfsdfs’);桥接到Javascript的方法返回值类型必须是void。React Native的桥接操作是异步的,所以要返回结果给Javascript,你必须通过回调或者触发事件来进行。
2:传参并带有回调
// 对外提供调用方法,演示Callback
RCT_EXPORT_METHOD(testCallbackEvent:(NSDictionary *)dictionary callback:(RCTResponseSenderBlock)callback)
{
NSLog(@"当前名字为:%@",dictionary);
NSArray *events=@[@"callback ", @"test ", @" array"];
callback(@[[NSNull null],events]);
}
注意:第一个参数代表从JavaScript传过来的数据,第二个参数是回调方法;
JS代码如下:
import {
NativeModules,
NativeAppEventEmitter
} from 'react-native'; var CalendarManager = NativeModules.wjyTestManager; class ReactNativeProject extends Component {
render() {
return (
<TouchableHighlight onPress={()=>{CalendarManager.testCallbackEvent(
{'name':'good','description':'http://www.lcode.org'},
(error,events)=>{
if(error){
console.error(error);
}else{
this.setState({events:events});
}
})}}
>
<Text style={styles.text}
>点击 </Text>
</TouchableHighlight> );
}
}
3:参数类型
RCT_EXPORT_METHOD 支持所有标准JSON类型,包括:
string (NSString)
number (NSInteger, float, double, CGFloat, NSNumber)
boolean (BOOL, NSNumber)
array (NSArray) 包含本列表中任意类型
object (NSDictionary) 包含string类型的键和本列表中任意类型的值
function (RCTResponseSenderBlock)
除此以外,任何RCTConvert类支持的的类型也都可以使用(参见RCTConvert了解更多信息)。RCTConvert还提供了一系列辅助函数,用来接收一个JSON值并转换到原生Objective-C类型或类。例如
#import "RCTConvert.h"
#import "RCTBridge.h"
#import "RCTEventDispatcher.h" // 对外提供调用方法,为了演示事件传入属性字段
RCT_EXPORT_METHOD(testDictionaryEvent:(NSString *)name details:(NSDictionary *) dictionary)
{
NSString *location = [RCTConvert NSString:dictionary[@"thing"]];
NSDate *time = [RCTConvert NSDate:dictionary[@"time"]];
NSString *description=[RCTConvert NSString:dictionary[@"description"]]; NSString *info = [NSString stringWithFormat:@"Test: %@\nFor: %@\nTestTime: %@\nDescription: %@",name,location,time,description];
NSLog(@"%@", info);
}
三: iOS原生访问调用React Native
如果我们需要从iOS原生方法发送数据到JavaScript中,那么使用eventDispatcher。
#import "RCTBridge.h"
#import "RCTEventDispatcher.h" @implementation CalendarManager @synthesize bridge = _bridge; // 进行设置发送事件通知给JavaScript端
- (void)calendarEventReminderReceived:(NSNotification *)notification
{
NSString *name = [notification userInfo][@"name"];
[self.bridge.eventDispatcher sendAppEventWithName:@"EventReminder"
body:@{@"name": name}];
} @end
在JavaScript中可以这样订阅事件:
import { NativeAppEventEmitter } from 'react-native'; var subscription = NativeAppEventEmitter.addListener(
'EventReminder',
(reminder) => console.log(reminder.name)
);
...
// 千万不要忘记忘记取消订阅, 通常在componentWillUnmount函数中实现。
subscription.remove();
注意:用NativeAppEventEmitter.addListener中注册一个通知,之后再OC中通过bridge.eventDispatcher sendAppEventWithName发送一个通知,这样就形成了调用关系。
四:代码段内容:
#import "CalendarManager.h"
#import "RCTConvert.h"
#import "RCTBridge.h"
#import "RCTEventDispatcher.h" @implementation CalendarManager @synthesize bridge=_bridge; // 默认名称
RCT_EXPORT_MODULE() /**
// 指定执行模块里的方法所在的队列
- (dispatch_queue_t)methodQueue
{
return dispatch_get_main_queue();
}
*/ // 在完整demo中才有用到,用于更新原生UI
- (void)showInfo:(NSString *)info
{
// 更新UI操作在主线程中执行
dispatch_async(dispatch_get_main_queue(), ^{
//Update UI in UI thread here [[NSNotificationCenter defaultCenter] postNotificationName:@"react_native_test" object:nil userInfo:@{@"info": info}];
});
} - (void)showDate:(NSDate *)date withName:(NSString *)name forSomething:(NSString *)thing
{
NSDateFormatter *formatter = [[NSDateFormatter alloc] init] ;
[formatter setDateFormat:@"yyyy-MM-dd"]; NSString *info = [NSString stringWithFormat:@"Test: %@\nFor: %@\nTestTime: %@", name, thing,[formatter stringFromDate:date]];
NSLog(@"%@", info);
} // 对外提供调用方法
RCT_EXPORT_METHOD(testNormalEvent:(NSString *)name forSomething:(NSString *)thing)
{
NSString *info = [NSString stringWithFormat:@"Test: %@\nFor: %@", name, thing];
NSLog(@"%@", info);
} // 对外提供调用方法,为了演示事件时间格式化 secondsSinceUnixEpoch
RCT_EXPORT_METHOD(testDateEventOne:(NSString *)name forSomething:(NSString *)thing data:(NSNumber*)secondsSinceUnixEpoch)
{
NSDate *date = [RCTConvert NSDate:secondsSinceUnixEpoch];
[self showDate:date withName:name forSomething:thing];
} // 对外提供调用方法,为了演示事件时间格式化 ISO8601DateString
RCT_EXPORT_METHOD(testDateEventTwo:(NSString *)name forSomething:(NSString *)thing date:(NSString *)ISO8601DateString)
{
NSDate *date = [RCTConvert NSDate:ISO8601DateString];
[self showDate:date withName:name forSomething:thing];
} // 对外提供调用方法,为了演示事件时间格式化 自动类型转换
RCT_EXPORT_METHOD(testDateEvent:(NSString *)name forSomething:(NSString *)thing date:(NSDate *)date)
{
[self showDate:date withName:name forSomething:thing];
} // 对外提供调用方法,为了演示事件传入属性字段
RCT_EXPORT_METHOD(testDictionaryEvent:(NSString *)name details:(NSDictionary *) dictionary)
{
NSString *location = [RCTConvert NSString:dictionary[@"thing"]];
NSDate *time = [RCTConvert NSDate:dictionary[@"time"]];
NSString *description=[RCTConvert NSString:dictionary[@"description"]]; NSString *info = [NSString stringWithFormat:@"Test: %@\nFor: %@\nTestTime: %@\nDescription: %@",name,location,time,description];
NSLog(@"%@", info);
} // 对外提供调用方法,演示Callback
RCT_EXPORT_METHOD(testCallbackEvent:(RCTResponseSenderBlock)callback)
{
NSArray *events=@[@"callback ", @"test ", @" array"];
callback(@[[NSNull null],events]);
} // 对外提供调用方法,演示Promise使用
RCT_REMAP_METHOD(testPromiseEvent,
resolver:(RCTPromiseResolveBlock)resolve
rejecter:(RCTPromiseRejectBlock)reject)
{
NSArray *events =@[@"Promise ",@"test ",@" array"];
if (events) {
resolve(events);
} else {
NSError *error=[NSError errorWithDomain:@"我是Promise回调错误信息..." code: userInfo:nil];
reject(@"no_events", @"There were no events", error);
}
} // 对外提供调用方法,演示Thread使用
RCT_EXPORT_METHOD(doSomethingExpensive:(NSString *)param callback:(RCTResponseSenderBlock)callback)
{
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, ), ^{
// 在后台执行耗时操作
// You can invoke callback from any thread/queue
callback(@[[NSNull null],@"耗时操作执行完成..."]);
});
} // 进行设置封装常量给JavaScript进行调用
-(NSDictionary *)constantsToExport
{
// 此处定义的常量为js订阅原生通知的通知名
return @{@"receiveNotificationName":@"receive_notification_test"};
} // 开始订阅通知事件
RCT_EXPORT_METHOD(startReceiveNotification:(NSString *)name)
{
[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(calendarEventReminderReceived:)
name:name
object:nil];
} // 进行设置发送事件通知给JavaScript端(这里需要注意,差一个触发通知点,需自己想办法加上,或者看完整demo)
- (void)calendarEventReminderReceived:(NSNotification *)notification
{
NSString *name = [notification userInfo][@"name"];
[self.bridge.eventDispatcher sendAppEventWithName:@"EventReminder"
body:@{@"name": name}];
} @end
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ScrollView,
TouchableHighlight
} from 'react-native'; import {
NativeModules,
NativeAppEventEmitter
} from 'react-native'; var subscription;
var CalendarManager = NativeModules.CalendarManager; class CustomButton extends React.Component {
render() {
return (
<TouchableHighlight
style={{padding: , backgroundColor:this.props.backgroundColor}}
underlayColor="#a5a5a5"
onPress={this.props.onPress}>
<Text>{this.props.text}</Text>
</TouchableHighlight>
);
}
} class ModulesDemo extends Component { constructor(props){
super(props);
this.state={
events:'',
notice:'',
}
} componentDidMount(){
console.log('开始订阅通知...');
this.receiveNotification(); subscription = NativeAppEventEmitter.addListener(
'EventReminder',
(reminder) => {
console.log('通知信息:'+reminder.name)
this.setState({notice:reminder.name});
}
);
} receiveNotification(){
// CalendarManager.receiveNotificationName 为原生定义常量
CalendarManager.startReceiveNotification(CalendarManager.receiveNotificationName);
} componentWillUnmount(){
subscription.remove();
} //获取Promise对象处理
async updateEvents(){
console.log('updateEvents');
try{
var events=await CalendarManager.testPromiseEvent();
this.setState({events});
}catch(e){
console.error(e);
}
} render() { var date = new Date(); return (
<ScrollView>
<View>
<Text style={{fontSize: , textAlign: 'center', margin: }}>
RN模块
</Text> <View style={{borderWidth: ,borderColor: '#000000'}}>
<Text style={{fontSize: , margin: }}>
普通调用原生模块方法
</Text> <CustomButton text="调用testNormalEvent方法-普通"
backgroundColor= "#FF0000"
onPress={()=>CalendarManager.testNormalEvent('调用testNormalEvent方法', '测试普通调用')}
/> <CustomButton text="调用testDateEvent方法-日期处理"
backgroundColor= "#FF7F00"
onPress={()=>CalendarManager.testDateEvent('调用testDateEvent方法', '测试date格式',date.getTime())}
/>
<CustomButton text="调用testDictionaryEvent方法-字典"
backgroundColor= "#FFFF00"
onPress={()=>CalendarManager.testDictionaryEvent('调用testDictionaryEvent方法', {
thing:'测试字典(字段)格式',
time:date.getTime(),
description:'就是这么简单~'
})}
/>
</View> <View>
<Text style={{fontSize: , margin: }}>
'Callback返回数据:{this.state.events}
</Text> <CustomButton text="调用原生模块testCallbackEvent方法-Callback"
backgroundColor= "#00FF00"
onPress={()=>CalendarManager.testCallbackEvent((error,events)=>{
if(error){
console.error(error);
}else{
this.setState({events:events,});
}
}
)}
/>
<CustomButton text="调用原生模块testPromiseEvent方法-Promise"
backgroundColor= "#00FFFF"
onPress={()=>this.updateEvents()}
/>
</View> <View style={{borderWidth: ,borderColor: '#000000'}}>
<Text style={{fontSize: , margin: }}>
原生调js,接收信息:{this.state.notice}
</Text>
</View> </View>
</ScrollView>
);
}
} AppRegistry.registerComponent('NativeTest', () => ModulesDemo);
最近有个妹子弄的一个关于扩大眼界跟内含的订阅号,每天都会更新一些深度内容,在这里如果你感兴趣也可以关注一下(嘿对美女跟知识感兴趣),当然可以关注后输入:github 会有我的微信号,如果有问题你也可以在那找到我;当然不感兴趣无视此信息;
React Native知识12-与原生交互的更多相关文章
- React Native知识
http://www.cnblogs.com/wujy/tag/React%20Native/ React Native知识12-与原生交互 React Native知识11-Props(属性) ...
- React Native – 使用 JavaScript 开发原生应用
前不久,Facebook 在F8开发者大会上正式开源了 React Native 项目.不过目前只有 iOS 版,Android 版还需要再等一段时间,这是最新的用 JavaScript 语言开发原生 ...
- 将React Native集成至Android原生应用
将React Native集成至Android原生应用 Android Studio 2.1 Preview 4生成的空项目 react-native 环境 0.22.2 初次编译后apk有1.1M, ...
- React Native知识2-Text组件
Text用于显示文本的React组件,并且它也支持嵌套.样式,以及触摸处理.在下面的例子里,嵌套的标题和正文文字会继承来自styles.baseText的fontFamily字体样式,不过标题上还附加 ...
- React Native知识5-Touchable类组件
React Native 没有像web那样可以给元素绑定click事件,前面我们已经知道Text组件有onPress事件,为了给其他组件 也绑定点击事件,React Native提供了3个组件来做这件 ...
- react native 0.50与OC交互 && Swift与RN交互
新公司也打算做rn,还是得捡起来再度学习.开撸! react native一个版本一个样子,之前写的rn与iOS交互系列在最新版本中有点出入(0.50.4版本).今天填一下坑. 首先上npm版本,re ...
- React Native知识6-NavigatorIOS组件
NavigatorIOS包装了UIKit的导航功能,可以使用左划功能来返回到上一界面.本组件并非由Facebook官方开发组维护.这一组件的开发完全由社区主导.如果纯js的方案能够满足你的需求的话,那 ...
- React Native知识1-FlexBox 布局内容
一:理论知识点 1:什么是FlexBox布局? 弹性盒模型(The Flexible Box Module),又叫Flexbox,意为“弹性布局”,旨在通过弹性的方式来对齐和分布容器中内容的空间,使其 ...
- React Native项目集成iOS原生模块
今天学习一下怎么在React Native项目中集成iOS原生模块,道理和在iOS原生项目中集成React Native模块类似.他们的界面跳转靠的都是iOS原生的UINavigationContro ...
随机推荐
- linux下mono播放PCM音频
测试环境: Ubuntu 14 MonoDevelop CodeBlocks 1.建立一个共享库(shared library) 这里用到了linux下的音频播放库,alsa-lib. al ...
- ES6 箭头函数中的 this?你可能想多了(翻译)
箭头函数=>无疑是ES6中最受关注的一个新特性了,通过它可以简写 function 函数表达式,你也可以在各种提及箭头函数的地方看到这样的观点——“=> 就是一个新的 function”. ...
- 实现了一个百度首页的彩蛋——CSS3 Animation简介
在百度搜索中有这样一个彩蛋:搜索“旋转”,“跳跃”,“反转”等词语,会出现相应的动画效果(搜索“反转”后的效果).查看源码可以发现,这些效果正是通过CSS3的animation属性实现的. 实现这个彩 ...
- 初学者--bootstrap(六)组件中的字体图标----在路上(9)
组件---字体图标 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 1.如何使用: 出于性能的考虑,所有图标都需要一个基类和对应每个图标的类.把下面的代码放在 ...
- salesforce 零基础学习(五十七)Test 类中创建TestUser帮助类
我们写Test Class的时候往往都需要指定一个uesr去run test method. TestUserHelper类如下: public class TestUserHelper { publ ...
- python的print函数的格式化输出
使用print函数的时候,可以像C一样格式化输出,同时还支持参数化输出 print('%s' % ("CooMark")) print('整数|%d|' % (123)) prin ...
- angularjs集成requirejs
其实说成使用requirejs加载angularjs应用会更贴切一些 <body> <span ng-controller="homeController"> ...
- ASP.NET OWIN OAuth:refresh token的持久化
在前一篇博文中,我们初步地了解了refresh token的用途——它是用于刷新access token的一种token,并且用简单的示例代码体验了一下获取refresh token并且用它刷新acc ...
- springmvc+jpa实现分页的两种方式
1.工具类 public final class QueryTool { public static PageRequest buildPageRequest(int pageNumber, int ...
- 分布式系统理论进阶 - Paxos
引言 <分布式系统理论基础 - 一致性.2PC和3PC>一文介绍了一致性.达成一致性需要面临的各种问题以及2PC.3PC模型,Paxos协议在节点宕机恢复.消息无序或丢失.网络分化的场景下 ...