react.png
前言&目录
前两篇文章主要介绍了react-native的集成方法，本篇文章主要记录react-native的使用，包括：
1.原生控制器添加react-native视图
2.js向原生系统传值或事件
3.原生系统向js传值或事件
一、原生控制器添加react-native视图
第一个使用例子很简单，说下要求：想要实现主控制器为原生控制器，点击后push到下一个控制器显示的是react-native视图。
新建一个集成react-native后的项目，并新建两个控制器。既然要在第二个控制器中放上react-native视图，那么前面的代码都以往的开发一样。
设置主视图
// AppDelegate.m
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
self.window.rootViewController = [[UINavigationController alloc] initWithRootViewController:[[ViewController alloc] init]];
self.window.backgroundColor = [UIColor whiteColor];
[self.window makeKeyAndVisible];
return YES;
}
第一个控制器设置跳转
// ViewController.m
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
[self.navigationController pushViewController:[[NextViewController alloc] init] animated:YES];
}
而在第二个控制器上放上加载js的代码。
// NextViewController.m
- (void)viewDidLoad
{
[super viewDidLoad];
self.title = @"第二个VC";
NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"NewRN"
initialProperties:nil
launchOptions:nil];
rootView.frame = self.view.bounds;
[self.view addSubview:rootView];
}
这样就实现了想在哪使用react-native就在哪使用。
效果：
效果一.gif
（ps：react-native的界面暂时不管）
二、js向原生系统传值或事件
�数据传递
下面要实现的是，通过js向原生的程序传递数据。比如js里面的字符串要让程序打印出来。
下面开始实现：
新建一个继承NSObject且遵循RCTBridgeModule协议的类，这里命名为HelloWorld。
// HelloWorld.h
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
@interface HelloWorld : NSObject <RCTBridgeModule>
@end
// HelloWorld.m
#import "HelloWorld.h"
#import <UIKit/UIKit.h>
#import <React/RCTEventDispatcher.h>
#import <React/RCTConvert.h>
@implementation HelloWorld
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(sendStr:(NSString *)str)
{
NSLog(@"%@", str);
}
RCT_EXPORT_METHOD(sendArray:(NSArray *)arr)
{
NSLog(@"%@", arr);
}
RCT_REMAP_METHOD(sendParas, num:(nonnull NSNumber *)num str:(NSString *)str arr:(NSArray *)arr)
{
NSLog(@"%@ %@ %@", num, str, arr);
}
为了实现RCTBridgeModule协议，需要包含RCT_EXPORT_MODULE()宏。这个宏也可以添加一个参数用来指定在js中访问这个模块的名字。如果你不指定，默认就会使用这个类的名字。
通过RCT_EXPORT_METHOD()宏来实现js调用的oc方法。也就是说，在宏中声明一个方法，js中能获取到这个方法，并且调用，从而向原生传值。
下面是js代码：
// js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Button,
NativeModules,
Image
} from 'react-native';
export default class NewRN extends Component {
StrOnPress()
{
let HelloWorld = NativeModules.HelloWorld;
HelloWorld.sendStr('这是传过来的字符');
}
ArrOnPress()
{
let HelloWorld = NativeModules.HelloWorld;
var array = new Array()
array[0] = "this"
array[1] = "is"
array[2] = "array"
HelloWorld.sendSomeThing(array);
}
parasOnPress()
{
let HelloWorld = NativeModules.HelloWorld;
var array = new Array()
array[0] = "this"
array[1] = "is"
array[2] = "array"
HelloWorld.sendParas(2, '传过来的字符', array);
}
render()
{
return (
<View style={styles.container}>
<View style={{marginTop:10}}>
<Button onPress={this.StrOnPress.bind(this)} title="传递字符" />
</View>
<View style={{marginTop:10}}>
<Button onPress={this.ArrOnPress.bind(this)} title="传递数组" />
</View>
<View style={{marginTop:10}}>
<Button onPress={this.parasOnPress.bind(this)} title="多参数按钮" />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('NewRN', () => NewRN);
可以拿出一个来看：
// rn控件并添加响应
<View style={{marginTop:10}}>
<Button onPress={this.StrOnPress.bind(this)} title="传递字符" />
</View>
// js响应方法
StrOnPress()
{
let HelloWorld = NativeModules.HelloWorld;
HelloWorld.sendStr('这是传过来的字符');
}
// oc方法
RCT_EXPORT_METHOD(sendStr:(NSString *)str)
{
NSLog(@"%@", str);
}
通过代码可以看到通过点击rn的按钮执行StrOnPress()方法，然后获取到HelloWorld类的sendStr方法，并调用，然后就会打印出来。
效果：
效果二.gif
�响应事件
如果当点击rn中的按钮时，想要再跳到下一个控制器，该怎么做。
我试过给当前这个HelloWorld添加了协议，让第二个控制器遵守协议，当点击按钮时控制器实现协议方法，在协议方法中跳转，但是失败了。
也试过给HelloWorld添加block，并在block中跳转，也失败了。
失败的原因在于，在控制器中初始化HelloWorld的实例和在
RCT_EXPORT_METHOD(sendStr:(NSString *)str)
{
NSLog(@"%@", str);
}
方法中获得的self实例不是同一个。
目前能想到的方法是，直接在这个HelloWorld类中实现跳转。
RCT_EXPORT_METHOD(sendStr:(NSString *)str)
{
NSLog(@"%@", str);
UINavigationController *nav = (UINavigationController *)[UIApplication sharedApplication].keyWindow.rootViewController;
UIViewController *vc = [[UIViewController alloc] init];
vc.title = str;
[nav pushViewController:vc animated:YES];
}
三、原生系统向js传值或事件
要实现的是js传递两个数给原生，原生判断大小并返回结果。
代码：
RCT_REMAP_METHOD(compare, num1:(nonnull NSNumber *)num1 num2:(nonnull NSNumber *)num2 callback:(RCTResponseSenderBlock)callback)
{
NSString *result;
result = num1>num2 ? @"num1大于num2" : @"num1不大于num2";
NSArray *events = [NSArray arrayWithObjects:result,nil];
callback(@[[NSNull null], events]);
}
compareOnPress()
{
let HelloWorld = NativeModules.HelloWorld;
HelloWorld.compare(2, 3, (err, res) => {
alert(res);
});
}
<View style={{marginTop:10}}>
<Button onPress={this.compareOnPress.bind(this)} title="比较按钮" />
</View>
效果：
效果三.gif
这里是通过
RCTResponseSenderBlock来实现回调的。
再放一个例子：
RCT_REMAP_METHOD(printDate, date1:(nonnull NSNumber *)d1 date2:(nonnull NSNumber *)d2 event:(RCTResponseSenderBlock)callback)
{
NSString *resultStr;
NSDate* dt1 = [RCTConvert NSDate:d1];
NSDate* dt2 = [RCTConvert NSDate:d2];
NSComparisonResult result = [dt1 compare:dt2];
if (result==NSOrderedAscending) {
resultStr = @"比较结果:开始时间小于结束时间";
} else {
resultStr = @"比较结果:开始时间大于结束时间";
}
NSArray *events = [NSArray arrayWithObjects:resultStr,nil];
callback(@[[NSNull null], events]);
}
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Button,
DatePickerIOS,
NativeModules
} from 'react-native';
export default class NewRN extends Component {
constructor(){
super();
this.state = {startDate: new Date(), endDate: new Date()};
}
onPressDateValidation() {
var HelloWorld = NativeModules.HelloWorld;
HelloWorld.printDate(this.state.startDate.getTime(), this.state.endDate.getTime(), (err, res) => {
alert(res);
});
}
onStartDateChange(date) {
this.setState({startDate: date});
}
onEndDateChange(date) {
this.setState({endDate: date});
}
render() {
return (
<View style={{marginTop:40}}>
<DatePickerIOS
date={this.state.startDate}
mode='date'
onDateChange={this.onStartDateChange.bind(this)} />
<DatePickerIOS
date={this.state.endDate}
mode='date'
onDateChange={this.onEndDateChange.bind(this)} />
<Button onPress={this.onPressDateValidation.bind(this)} title="Compare" />
</View>
);
}
}
AppRegistry.registerComponent('NewRN', () => NewRN);
效果：
效果四.gif
