(
问渠那得清如许，为有源头活水来。双手奉上RN官网)
Integration With Existing Apps : 在原生项目中集成RN混合开发
原生开发体验及性能优良但开发周期太长,已经版本更新周期长.
RN开发速度快,底层封装原生接口,开发快,但某些情况下仍不如原生合适
两者结合进行混合开发,结合优点,互补不足,大有可为.
🔥Objective-C+RN
- 要点说明
- 1.明确你要集成 的RN组件
- 2.为你需要的RN组件使用subspecs创建一个Podfile文件(依赖于cocoapods)
- 3.使用JS创建你需要的RN组件
- 4.创建RCTRootView,并添加一个在事件处理,而RCTRootView指向了你在index.ios.js中注册的组件且其注册名是你在index.ios.js中定义的.(
WTF?) - 5.开启RN服务器并运行原生app.
- 6.不断增加或修改组件
- 7.调试
- 8.准备部署(通过
react-native-xcode.sh脚本) - 9.部署上架应用
- 具体实现
------ 1_先决条件 --------
1. RN开发环境配置
2. 安装Cocoapods (sudo gem install cocoapods),用它来方便的添加RN框架到项目.
------ 2_包依赖 --------
1. 需要react & react native 的node.js模块(通过npm管理的)
2. 在原生项目根目录(与*..xcodeproj同级目录)下添加package.json文件,该文件中配置了相关项目及模块信息,
(npm通过该文件来添加需要的包依赖).
例如下面信息是一个最精简的文件内容. 版本号依据你的需求而定.测试发现版本号要符合x.y.z规则
{
"name": "NumberTileGame",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "15.0.2",
"react-native": "0.26.1"
}
}
3. 在终端中进入`package.json文件所在目录`,运行命令` npm install ` 安装依赖的文件.
该命令会在根目录下创建`node_modules目录`来存放所依赖的包.
------ 3_ Podfile --------
1. 在项目根目录创建Podfile文件(通过npm我们把RN放在了node_modules,这里借助cocoapods把需要的组件引入进来),
可以通过`pod init`来创建一个模板文件
2. 在Podfile文件中写明需要添加的组件,例如
# target后紧跟项目名
target 'NumberTileGame' do
# :path对应的路径为RN所在路径. :subspecs中列出所需的RN控件
pod 'React', :path => './node_modules/react-native', :subspecs => [
'Core', #必须的一些核心控件,例如AppRegistry, StyleSheet, View等
'RCTText', #<Text>元素
'RCTWebSocket', # 用于 debugging
]
end
3. 在终端中进入项目根目录,运行 命令`pod install `安装所需组件依赖.
pod install 默认会更新本地库索引,比较耗费时间.大多数情况下并不需要更新,使用`pod install --no-repo-update`替代
安装完成后会生成xxx.xcworkspace,通过这个来打开项目
------ 4_ 代码中集成 --------
1. 在项目根目录创建文件index.ios.js,并在其中实现你的组件
2. AppRegistry.registerComponent('RNPage', () => RNHighScores);
这里的RNPage会在后边用到
------ 5_ RCTRootView --------
1. 例如这里在界面上添加了一个按钮,并关联了点击事件
#import "ViewController.h"
//引入RCTRootView
#import "RCTRootView.h"
@implementation ViewController
//与界面上按钮的点击事件关联
- (IBAction)showRNPage:(UIButton *)sender {
NSLog(@"High Score Button Pressed");
//TODO:这里在产品阶段似乎还需要一些操作,具体用到之后补充
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
RCTRootView *rootView = [[RCTRootView alloc]
initWithBundleURL:jsCodeLocation
//这里的moduleName要与在index.ios.js中注册的一致
moduleName:@"RNPage"
//传入的参数
initialProperties :@{
@"scores" : @[
@{
@"name" : @"Alex",
@"value": @"42"
},
@{
@"name" : @"Joel",
@"value": @"10"
}
]
}
launchOptions : nil];
UIViewController *vc = [[UIViewController alloc] init];
vc.view = rootView;
[self presentViewController:vc animated:YES completion:nil];
}
@end
------ 6_ 运行测试 --------
1. 在info.plist中设置允许http访问(添加设置App Transport Security Settings下的Allow Arbitrary Loads为YES)
2. 终端中进入项目根目录执行: npm start . 启动本地服务器
3. 运行app,直接使用xcode运行或者使用RN运行
(😡运行报错,尚未解决,日了狗了的)
------ 7_ 产品部署 --------
//文档里没有说,但notes里有提到,用到后再回来补充
🔥Swift+RN
🔥Android+RN
