本篇文章记录了在已经创建好的原生项目上集成react-native的过程。
创建工程
我在桌面创建了一个工程,命名RNTest。
添加package.json文件
在RNTest目录下创建一个package.json或者直接从别的react-native项目中复制过来。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22{
"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"
}
}
安装react-native模块
在终端cd到项目目录,然后执行npm install
。
导入react-native框架
1.创建一个新的文件夹,命名为Librarys,到时候要把rn的项目拉进文件夹中。
2.把rn的项目拉进文件夹中
这里要拉的比较多也比较杂,先拉React.xcodeproj文件。(路径如图)
再拉node_modules/react-native/Libraries下的文件
3.Link Binary With Libraries中添加.a库
(点击+按钮 全部添加后,在删除tvOS的就好,最后别忘了加上libstdc++.tbd)
(ps:这里我漏删除了一个tvOS的静态库,导致运行出错,删了就行,懒得再截图了。。。)
4.在Edit Scheme的Build中添加React
向Edit Scheme的Build中添加React,并拖拽到最上位置,并取消勾选Parallelize Build选项。这一步很关键,因为项目需要先编译React.a文件。
最后的配置
Build Settings
的Other Linker Flags
设置为 -ObjC
Header Search Paths
设置为/react-native/React
路径,并设置为 recursive。
创建index.ios.js文件
创建index.ios.js文件,到时候,rn代码要写在这里。当然,放在node_modules同一个目录下就可以。
设置AppDelegate.h代码
这里是为了获得rn的代码,从而相互传递数据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#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。。。不说了
运行
#完