iOS 现有项目手动集成 ReactNative

介绍

本文目的

在现有iOS项目中集成ReactNative。

软件环境

Mac OSX 10.11.6
Xcode 8

集成方式

官网推荐使用CocoaPod进行集成，但在实践的过程中，遇到一些问题，实在没有思路，故弃之。如有同学使用CocoaPod集成成功，还有留言告知，一起探讨。官方集成文档

集成步骤

首先我们创建一个iOS项目作为已有项目。(我创建的项目名是：ReactTest)
创建一个ReactNative项目，目的是获取最新的React Native包。(项目名是：test)
```
react-native init test
```
将test/node_modules拷贝到ReactTest根目录下
在ReactTest项目中创建Group：Libraries

创建文件：Libraries
在Group：Libraries中添加依赖的React Native项目。(不同的项目所添加的依赖库不同，需要开发者自己甄别)

添加项目的依赖

具体的添加方式是：Libraries上右键--> addFiles to "项目名"，选择目录：
node_modules/react-native/React/React.xcodeproj或者
node_modules/react-native/Libraries/Text/RCTText.xcodeproj
其他类似。
将依赖库链接到项目依赖库中。

添加到依赖库
在项目的搜索路径中添加：
$(SRCROOT)/node_modules/react-native/React

添加搜索路径
设置Other Linker Flag, 添加：-ObjC -lc++

设置other linker flag

修改代码AppDelegate.m

- (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;
}

修改ViewController.m

- (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项目根目录中一份。

拷贝package.json， index.ios.js

运行

在Xcode中

command R

如果运行出错，请查看下一节中是否有解决方法。

错误信息处理

error1: Invariant Violation:Application 项目名 has not been registered.

这个错误的原因是index.ios.js 中的注册名，和代码中的引用名不同；
index.ios.js 中

AppRegistry.registerComponent('Study', () => ReactTest);

ios 代码中引用

jsCodeLocation = [NSURL URLWithString:@"http://192.168.1.102:8081/index.ios.bundle?platform=ios&dev=true"];

参考：React-Native坑1：Invariant Violation:Application 项目名 has not been registered.

error2: Could not connect to development server.

这个错误的原因是localost识别问题。解决方式一，修改host文件。方式二, 使用本机ip, 运行之前首先要启动npm start
参考:react native小试身手
 React Native 运行出现 Could not connect to development server 解决方法

error3:Native module cannot be null

这个错误的原因是项目中使用的ReactNative模块没有加入到项目中，解决方式参考集成步骤中的5. 仔细检查自己的项目和报错信息。
参考：React-native, “Native module cannot be null”
使用链接库
 RN 集成到IOS原生应用时，出现 Native module cannot be null原因？

error4:Undefined symbols for architecture x86_64: “std::terminate()”, referenced from

运行项目时Xcode报错。
解决办法:add -lc++ in Other Linker Flags in your xcode project build settings.
参考：undefined-symbols-for-architecture-x86-64-stdterminate-referenced-from

其他

感谢这位博主提供的思路