本文大纲 :
1. 集成纯ReactNative 的项目
2. 在现有项目中手动集成ReactNative
3. 在现有项目中 使用CocoaPod 集成ReactNative
1.集成纯ReactNative 的项目
react-native init test
2. 在现有项目中手动集成ReactNative
- 创建一个ReactNative项目,目的是获取最新的React Native包。(项目名是:test)
react-native init test
- 将test/node_modules拷贝到ReactTest根目录下
- 在ReactTest项目中创建Group:Libraries
![](https://i-blog.csdnimg.cn/blog_migrate/2d092b23f0fa2c802b5032609fd3a260.webp?x-image-process=image/format,png)
创建文件:Libraries
- 在Group:Libraries中添加依赖的React Native项目。(不同的项目所添加的依赖库不同,需要开发者自己甄别)
![](https://i-blog.csdnimg.cn/blog_migrate/c95031e670c2665daef67a0f5cc09f55.webp?x-image-process=image/format,png)
添加项目的依赖
- 具体的添加方式是:Libraries上右键--> addFiles to "项目名",选择目录:
- node_modules/react-native/React/React.xcodeproj或者
- node_modules/react-native/Libraries/Text/RCTText.xcodeproj
- 其他类似。
- 将依赖库链接到项目依赖库中。
![](https://i-blog.csdnimg.cn/blog_migrate/d4f8fe42b7745b5d17db9eb354a04467.webp?x-image-process=image/format,png)
添加到依赖库
- 在项目的搜索路径中添加:
- $(SRCROOT)/node_modules/react-native/React
![](https://i-blog.csdnimg.cn/blog_migrate/3d4336cd0861b34be95ca161c8be8764.webp?x-image-process=image/format,png)
添加搜索路径
- 设置Other Linker Flag, 添加:-ObjC -lc++
![](https://i-blog.csdnimg.cn/blog_migrate/f0a53436231ea41abe826de904212d17.webp?x-image-process=image/format,png)
设置other linker flag
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
if(!self.window){
self.window = [[UIWindow alloc]init];
}
self.window.frame = [[UIScreen mainScreen]bounds];
self.window.backgroundColor = [UIColor whiteColor];
self.window.rootViewController = [ViewController new];
[self.window makeKeyAndVisible];
return YES;
}
- (void)viewDidLoad {
[super viewDidLoad];
UIButton *searchBtn = [[UIButton alloc]init];
searchBtn.frame =CGRectMake(0 +5,0, 100, 100);
searchBtn.backgroundColor = [UIColor colorWithRed:0.000 green:0.569 blue:1.000 alpha:1];
[searchBtn setTitle:@"搜索" forState:UIControlStateNormal];
[searchBtn setTitle:@"搜索" forState:UIControlStateHighlighted];
NSURL *jsCodeLocation;
jsCodeLocation = [NSURL URLWithString:@"http://192.168.1.102:8081/index.ios.bundle?platform=ios&dev=true"];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"Study"
initialProperties:nil
launchOptions:nil];
rootView.frame = [[UIScreen mainScreen]bounds];
[self.view addSubview:rootView];
[self.view addSubview:searchBtn];
}
- 添加package.json, index.ios.js
- 把test项目目录下面的package.json, index.ios.js拷贝一份到ReactTest项目根目录中一份。
![](https://i-blog.csdnimg.cn/blog_migrate/d520877599b1775571079efb4f284c33.webp?x-image-process=image/format,png)
拷贝package.json, index.ios.js
command R
index.ios.js 中
AppRegistry.registerComponent('Study',() => ReactTest);
jsCodeLocation = [NSURL URLWithString:@"http://192.168.1.102:8081/index.ios.bundle?pla
在现有项目中 使用CocoaPod 集成ReactNativestep 1.在项目中加入Cocoapods
项目工程根目录下pod initpod install
step 2.安装react-native
mkdir react
cd react
文件
{
"name": "RCTTest",
"version": "0.0.1",
"private": true,
"dependencies": { "react": "^0.14.8", "react-native":"^0.22.2"}
}
npm install
'use strict';
var React = require('react-native');
var { Text, View} = React;var styles = React.StyleSheet.create({ container: { flex:1, backgroundColor:'red' }});// 我们创建一个模块A
classModuleAextendsReact.Component{
render() {
return (
<Viewstyle={styles.container}><Text>This is a simple application.</Text></View> )
<Text>This is a simple application.</Text>
</View>
)
}
}
React.AppRegistry.registerComponent('ModuleA', () => ModuleA);
step 3.使用Cocoapods集成react-native
pod 'React', :path => './react/node_modules/react-native', :subspecs => [
'Core',
'RCTNetwork',
'RCTText',
'RCTWebSocket',
# 添加其他你想在工程中使用的依赖。
]
更新pod
pod update
step 4.run run run
react-native start
打开工程中的 Info.list 文件,添加下面配置即可:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
NSString * strUrl =@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";
NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];
RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"ModuleA" initialProperties:nil launchOptions:nil];
[self.view addSubview:rootView];rootView.frame =CGRectMake(0,20,300, 300);
react-native init awesome
首先我们创建一个iOS项目作为已有项目。(我创建的项目名是:ReactTest)
-
修改代码AppDelegate.m
修改ViewController.m
运行
在Xcode中
如果运行出错,请查看下一节中是否有解决方法。
错误信息处理
error1: Invariant Violation:Application 项目名 has not been registered.
这个错误的原因是index.ios.js 中的注册名,和代码中的引用名不同;
ios 代码中引用
Cocoapods是iOS中目前公认的最便捷,合理的第三方框架管理工具,具体的网上很多相关的文章,一搜就可以了。
先创建一个文件夹用来存放react-native
进入创建的react文件中
创建package.json
在react文件夹中安装react-native
创建index.ios.js
文件
在Podfile
中添加React
注意:./react
/node_modules/react-native这个react是和你开始创建的存放RCT的目录是相同的。记得要添加所有你需要的依赖!举例来说, 元素如果不添加RCTText依赖就不能运行。
到这里,配置工作就基本完成了,接下来跑起来试一下
先进入开始安装RCT的目录中,开启服务
在iOS 9以上的系统中,除非明确指明,否则应用无法通过http协议连接到localhost主机。 我们建议你在Info.plist文件中将localhost列为App Transport Security的例外。 如果不这样做,在尝试通过http连接到服务器时,会遭遇这个错误 - Could not connect to development server.
做完配置,就可以开始写代码了