×

iOS现有项目手动集成ReactNative

96
RiverLi
2016.10.04 19:50* 字数 755

介绍

本文目的

在现有iOS项目中集成ReactNative。

软件环境

Mac OSX 10.11.6
Xcode 8

集成方式

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

集成步骤

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


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


    添加项目的依赖

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

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


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


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


    设置other linker flag
  7. 修改代码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];
}
  1. 添加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

欢迎关注我的公众号与我交流

RiverLi的公众号
iOS开发
Web note ad 1