iOS现有项目手动集成ReactNative

介绍

本文目的

在现有iOS项目中集成ReactNative。

软件环境

Mac OSX 10.11.6
Xcode 8

集成方式

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

集成步骤

1. 首先我们创建一个iOS项目作为已有项目。(我创建的项目名是:ReactTest)

2. 创建一个ReactNative项目,目的是获取最新的React Native包。(项目名是:test)

1
react-native init test

3. 将test/node_modules拷贝到ReactTest根目录下

4. 在ReactTest项目中创建Group:Libraries

5. 在Group:Libraries中添加依赖的React Native项目。(不同的项目所添加的依赖库不同,需要开发者自己甄别)


具体的添加方式是:Libraries上右键–> addFiles to “项目名”,选择目录:
node_modules/react-native/React/React.xcodeproj或者
node_modules/react-native/Libraries/Text/RCTText.xcodeproj
其他类似。

6. 将依赖库链接到项目依赖库中。

7. 在项目的搜索路径中添加:

$(SRCROOT)/node_modules/react-native/React
添加搜索路径

8. 设置Other Linker Flag, 添加:-ObjC -lc++

9. 修改代码AppDelegate.m

1
2
3
4
5
6
7
8
9
10
11
- (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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
- (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];
}

10. 添加package.json, index.ios.js

把test项目目录下面的package.json, index.ios.js拷贝一份到ReactTest项目根目录中一份。

运行

在Xcode中

1
command R

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

错误信息处理

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

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

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

ios 代码中引用

1
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