本篇文章记录了在已经创建好的原生项目上集成react-native的过程。
一、创建工程
我在桌面创建了一个工程，命名RNTest。
1_1.png
二、添加package.json文件
在RNTest目录下创建一个package.json或者直接从别的react-native项目中复制过来。
{
"name": "RNTest",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "~15.4.1",
"react-native": "0.42.0"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "2.1.0",
"jest": "20.0.4",
"react-test-renderer": "~15.4.1"
},
"jest": {
"preset": "react-native"
}
}
2_1.png
三、安装react-native模块
在终端cd到项目目录，然后执行npm install。
3_1.png
3_2.png
四、导入react-native框架
1.创建一个新的文件夹，命名为Librarys，到时候要把rn的项目拉进文件夹中。
4_1.png
2.把rn的项目拉进文件夹中
这里要拉的比较多也比较杂，先拉React.xcodeproj文件。（路径如图）
4_2.png
再拉node_modules/react-native/Libraries下的文件
4_3.png
4_4.png
3.Link Binary With Libraries中添加.a库
4_5.png
（点击+按钮 全部添加后，在删除tvOS的就好，最后别忘了加上libstdc++.tbd）
（ps：这里我漏删除了一个tvOS的静态库，导致运行出错，删了就行，懒得再截图了。。。）
4.在Edit Scheme的Build中添加React
向Edit Scheme的Build中添加React,并拖拽到最上位置,并取消勾选Parallelize Build选项。这一步很关键,因为项目需要先编译React.a文件。
4_6.png
4_7.png
五、最后的配置
Build Settings的Other Linker Flags设置为 -ObjC
Header Search Paths设置为/react-native/React路径，并设置为 recursive。
5_1.png
六、创建index.ios.js文件
创建index.ios.js文件，到时候，rn代码要写在这里。当然，放在node_modules同一个目录下就可以。
6_1.png
七、设置AppDelegate.h代码
这里是为了获得rn的代码，从而相互传递数据
#import "AppDelegate.h"
#import <React/RCTRootView.h>
#import <React/RCTBundleURLProvider.h>
#import "ViewController.h"
@interface AppDelegate ()
@end
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"RNTest"
initialProperties:nil
launchOptions:nil];
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
self.window.rootViewController = [[UIViewController alloc] init];
self.window.rootViewController.view = rootView;
[self.window makeKeyAndVisible];
return YES;
}也不一定要写在这里，可以放在需要使用rn的VC中。
八、使用了HTTPS协议进行传输
为了能上网，在info.plist文件中添加一个字典类型的key为App Transport Security Settings。。。不说了
九、运行
8_1.png
完
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
完
作者：Jabber_YQ
链接：http://www.jianshu.com/p/b0b8516fcbcf
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
