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 ...
随机推荐
- 【腾讯优测干货分享】如何降低App的待机内存(三)——探索内存增长的原因
本文来自于腾讯优测公众号(wxutest),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/8BiKIt3frq9Yv9KV5FXlGw 1.3新问题的进一步挖 ...
- 在 Linux 中使用 Git 及其 和 Eclipse 的集成
##参考资料## 我是通过阅读<Pro Git>这本书学习 Git 的,我读的时候还是第一版的英文版,现在已经出第二版了,而且英文版和中文版都有.英文第二版的地址是 [https://gi ...
- Entity Framework 6 Recipes 2nd Edition(13-1)译 -> 优化TPT继承模型的查询
问题 你想提高在一个TPT继承模型里的查询 解决方案 让我们假设有一个简单的TPT继承模型,如图Figure 13-1 Figure 13-1. A simple Table per Type inh ...
- Lind.DDD.Plugins~插件模式的集成
回到目录 对于Lind.DDD这个敏捷框架来说,插件也是其中的一个亮点,所有被认为是插件(Plugins)的模块都会继承自IPlugins这个标示接口,它在程序启动时会找到所有插件,并通过autofa ...
- 《学技术练英语》PPT分享
之前做的一个PPT,分享给博客园的同学. 下载地址: 学技术练英语.pdf 技术是靠自己去学的,学技术不能仅仅是看书看博客,最好是有实践,不管是做实验去验证,还是写各种代码去玩各种特性,还是造轮子都是 ...
- SSH框架整合(代码加文字解释)
一.创建数据库并设置编码. A) create database oa default character set utf8. 二.MyEclipse工程 A) 在Myeclipse里创建web工程, ...
- [Java Collection]List分组之简单应用.
前言 今天有一个新需求, 是对一个List进行分组, 于是便百度到一些可用的代码以及我们项目使用的一些tools, 在这里总结下方便以后查阅. 一: 需求 现在我们一个数据库表t_series_val ...
- JavaScript与PHP中正则
一.JavaScript 有个在线调试正则的工具,点击查看工具.下面的所有示例代码,都可以在codepen上查看到. 1.创建正则表达式 var re = /ab+c/; //方式一 正则表达式字面量 ...
- JavaScript中尺寸、坐标
测试环境是IE8,Chrome38,Firefox40,下面是全局通用脚本打印代码 /** * 打印 */ function write(str) { document.write(str + '&l ...
- css3 transition animation nick
时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...