前言&目录
前两篇文章主要介绍了react-native的集成方法，本篇文章主要记录react-native的使用，包括：
1.原生控制器添加react-native视图
2.js向原生系统传值或事件
3.原生系统向js传值或事件
一、原生控制器添加react-native视图
第一个使用例子很简单，说下要求：想要实现主控制器为原生控制器，点击后push到下一个控制器显示的是react-native视图。
新建一个集成react-native后的项目，并新建两个控制器。既然要在第二个控制器中放上react-native视图，那么前面的代码都以往的开发一样。
设置主视图1
2
3
4
5
6
7
8// 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;
}
第一个控制器设置跳转1
2
3
4
5// ViewController.m
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
[self.navigationController pushViewController:[[NextViewController alloc] init] animated:YES];
}
而在第二个控制器上放上加载js的代码。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15// 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就在哪使用。
效果：
（ps：react-native的界面暂时不管）
二、js向原生系统传值或事件
数据传递
下面要实现的是，通过js向原生的程序传递数据。比如js里面的字符串要让程序打印出来。
下面开始实现：
新建一个继承NSObject且遵循RCTBridgeModule协议的类，这里命名为HelloWorld。1
2
3
4
5// HelloWorld.h
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
@interface HelloWorld : NSObject <RCTBridgeModule>
@end
1 | // HelloWorld.m |
为了实现RCTBridgeModule协议，需要包含RCT_EXPORT_MODULE()宏。这个宏也可以添加一个参数用来指定在js中访问这个模块的名字。如果你不指定，默认就会使用这个类的名字。
通过RCT_EXPORT_METHOD()宏来实现js调用的oc方法。也就是说，在宏中声明一个方法，js中能获取到这个方法，并且调用，从而向原生传值。
下面是js代码：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79// 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);
可以拿出一个来看：1
2
3
4// rn控件并添加响应
<View style={{marginTop:10}}>
<Button onPress={this.StrOnPress.bind(this)} title="传递字符" />
</View>
1 | // js响应方法 |
1 | // oc方法 |
通过代码可以看到通过点击rn的按钮执行StrOnPress()方法，然后获取到HelloWorld类的sendStr方法，并调用，然后就会打印出来。
效果：
响应事件
如果当点击rn中的按钮时，想要再跳到下一个控制器，该怎么做。
我试过给当前这个HelloWorld添加了协议，让第二个控制器遵守协议，当点击按钮时控制器实现协议方法，在协议方法中跳转，但是失败了。
也试过给HelloWorld添加block，并在block中跳转，也失败了。
失败的原因在于，在控制器中初始化HelloWorld的实例和在1
2
3
4RCT_EXPORT_METHOD(sendStr:(NSString *)str)
{
NSLog(@"%@", str);
}
方法中获得的self实例不是同一个。
目前能想到的方法是，直接在这个HelloWorld类中实现跳转。1
2
3
4
5
6
7
8RCT_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传递两个数给原生，原生判断大小并返回结果。
代码：1
2
3
4
5
6
7RCT_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]);
}
1 | compareOnPress() |
效果：
这里是通过RCTResponseSenderBlock来实现回调的。
再放一个例子：1
2
3
4
5
6
7
8
9
10
11
12
13
14RCT_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]);
}
1 | import React, { Component } from 'react'; |
效果：
