本篇文章记录了在已经创建好的原生项目上集成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
