介绍
本文目的
在现有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
其他
感谢这位博主提供的思路
Demo下载地址：https://github.com/riverlj/ReactTest.git
网友评论