神刀安全网

React Native移植iOS原生项目-已更新版本

本文已经经过作者( huxiaoqiao )授权

项目地址:https://github.com/huxiaoqiao/React-Native-Study

前提

已经配置好React Native命令行环境

刚创建的React Native交流6群: 426762904 欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

手工集成React Native

第一步:初始化React Native环境

在我们要集成的项目中,进入到*.xcodeproj文件的上级目录,运行React Native初始化命令react-native init [Project Name]会出现prompt, 输入yes,这样会在ios目录下生成一个同名工程。init过程会需要一点时间,耐心等待。

React Native移植iOS原生项目-已更新版本 完成后项目文件目录会变成这样:

React Native移植iOS原生项目-已更新版本

  • node_modules:react native依赖包
  • ios:iOS项目相关代码,Xcode工程文件
  • android:Android项目相关代码
  • index.ios.js:iOS平台加载的JS脚本
  • index.android.js:Android平台加载的JS脚本
  • package.json:当前项目的npm package的配置文件,内容如下:
{ "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start" }, "name": "Project", "dependencies": { "react": "^15.1.0", "react-native": "^0.27.2" }, "version": "0.0.1" }

接下来,我们可以先把Android相关的文件给干掉:

  • android
  • index.android.js
  • node_modules/react-native/android
  • node_modules/react-native/ReactAndroid

第二步:添加React Native的Libraries

打开ios目录下的那个同名工程,可以看到这个工程引用的React Native库如下:

React Native移植iOS原生项目-已更新版本

打开我们原有的项目,右键工程目录,选择New Group,新建一个名为Libraries的目录

然后把前面项目Libraries下的*.xcodeproj文件全部拖到这个项目的Libraries下,效果跟上图一样。

第三步:添加React Native shell脚本

React Native的iOS项目在编译时会先运行一个shell脚本,其作用有两个:

  • 从Terminal启动了一个Node.js的server用于React Native调试
  • 将React Native的资源文件打包放在编译目录下

具体添加方式:

  • 选择TARGETS的Build Phases界面,点击左上角的+号

React Native移植iOS原生项目-已更新版本

  • 选择New Run Script Phase添加一个脚本,并命名为Bundle React Native code and images/li>
  • 把ios下工程中的脚本引用代码复制过来,如下图。注意路径,因为我们的原有的*.xcodeproj文件跟node_modules是在同一个目录下的,所以我们要去掉两个点中的一个点。

React Native移植iOS原生项目-已更新版本

第四步:链接.a文件和添加搜索头文件的地址

到这一步,我们就可以干掉ios目录了,然后关闭原有的工程,再重新打开。

在工程的Build Phases界面的Link Binary With Libraries,点击

最下面的+号,可以看到在Workspace下多了很多.a文件,如下图,把它们全部添加进去。

React Native移植iOS原生项目-已更新版本

  • 接下来还需要添加React的搜索头文件,在TARGETS->Build Settings->Header Search Paths中添加一条$(SRCROOT)/node_modules/react-native/React,选择recursive,如下图所示。

React Native移植iOS原生项目-已更新版本

第五步:编译

我们先编译一下,会发现编译不通过,一堆报错。

原因是我们还没有导入JavaScriptCore库。因为React Native与原生的交互需要依赖于JavaScriptCore.framework。

再次编译,发现可以编译成功了。

测试运行React Native界面

在AppDelegate.m中的didFinishLaunchingWithOptions:方法中添加如下代码:

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation                                                       moduleName:@"Project"                                                initialProperties:nil                                                    launchOptions:launchOptions];   rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];   UIViewController *rootViewController = [UIViewController new];   rootViewController.view = rootView;   self.window.rootViewController = rootViewController;   [self.window makeKeyAndVisible];

CMD+R运行,会看到如下界面:

React Native移植iOS原生项目-已更新版本

至此,原有项目集成React Native大功告成。祝在React Native的世界中玩得开心!

关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注,第一时间推送精彩文章)

React Native移植iOS原生项目-已更新版本

关注我的微博,可以获得更多精彩内容

React Native移植iOS原生项目-已更新版本

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » React Native移植iOS原生项目-已更新版本

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址