React—Native IOS混合开发

   再此之前由于学习过一段时间的RN框架  对于RN可以说相对有些认知 在混编开始之前做了一个Demo  发现集成非常简单  然而在把之前构建的工程塞入到现有IOS工程中时发现了各种各样的错误 下面我简述所有步骤和发生的问题 

 1. 首先要做的就是将之前的RN工程塞入到IOS工程中


React—Native IOS混合开发_第1张图片

我们可以看到 在这个文件中存在五个文件  其中index.ios.js 和package.json是我之前工程中的   index.ios.js 你可以理解为是RN的入口(当你第一次构建纯RN框架中会有这个文件)package.json 你可以理解成管理第三方的json文件 如果你对cocopod熟悉 你可以认为它和Podfile文件是一个作用  


React—Native IOS混合开发_第2张图片
pack.json

可以看到这就是pack.json

接下来我们要做的就是加载第三方库 在操作这一步时终端一直显示报错  查看文档发现原来在高于0.44版本时 RN多了两个文件  但是这两个文件被墙了   所以导致了一系列的错误  再此我们的操作是  在科学上网的状态下进行更新 

1.首先在工程当前目录键入npm install

2.如果一切顺利 那么恭喜你 已经成功一半了 如果遇到报错   那来看看是否是以下错误

1)[email protected]: connect 2.x series is deprecated

解决办法: 终端输入npm install -g npm

2)npm WARN [email protected] requires a peer of react@~15.3.1 but none was installed.

解决办法:  1 终端输入npm install -save react@~16.0.0                 

                     2 更新react react-native upgrade                   

                     3最后启动 npm  npm install

3.解决了以上问题 我们就可以将rn接入项目了   

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

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL : jsCodeLocation moduleName : @"TravelAssistant" initialProperties :nil launchOptions : nil];

UIViewController *vc = [[UIViewController alloc] init];���

vc.view = rootView;

[self.navigationController pushViewController:vc animated:YES];

这样我们就成功接入了React-Native  下次我们来聊聊汇编以后的那些事儿

你可能感兴趣的:(React—Native IOS混合开发)