最新iOS原生项目集成React-Native:集成记录

       大楼不是一天所建成,是时间慢慢积累起来滴,原先用原生写的项目,没办法将项目中所有的代码都换成RN,而且我也不认为全换成RN就是好的,所以准备先将项目中的一些页面改成RN开发。由于我们并没有使用Cocoapods,因为Cocoapods管理第三方依赖的时候会自动创建一些目录,不便整个团队的管理。本篇文章记录了在已经创建好的原生项目上集成react-native的过程。

前提:电脑已经安装过React-Native相关环境。


一、创建工程

我在桌面创建了一个工程,命名RNTest。

下面我使用Xcode创建一个新的项目作为我们原生的ios项目:

打开Xcode -> Create a new Xcode project -> Single View Application ->RNtest

 创建工程

二、添加package.json文件

在RNTest目录下创建一个package.json。

package.json

三、安装react-native模块

在终端cd到项目目录,然后执行 npm install。


四. 创建 index.ios.js(js文件入口)

在RNtest文件夹里创建index.ios.js文件,作为js文件入口。

五、手动集成react-native框架

1.添加react-native工程文件

由于项目没有使用Cocoapods进行第三方依赖包管理,所有我们需要手动将react-native工程包添加到我们的原生ios工程中。打开RNtest/node_modules/react-native目录,找到相关的项目包,将React相关的工程包手动添加到项目中:

由于要拉的东西比较多也比较杂,首先先拉React.xcodeproj文件。(路径如图)


在集成node_modules/react-native/Libraries下的文件

2.添加相关frameworks文件

接下来要将相关的frameworks文件添加到工程中,RNtest -> TARGETS ->RNtest-> Build Phases -> Link Binary Width Libraries 

最后别忘了加上libstdc++.tbd。

3.在Edit Scheme的Build中添加React

向Edit Scheme的Build中添加React,并拖拽到最上位置,并取消勾选Parallelize Build选项。这一步很关键,因为项目需要先编译React.a文件。


4.最后环境配置

Build Settings 的 Other Linker Flags设置为-ObjC

Header Search Paths设置为$(SRCROOT)/node_modules/react-native/React路径,并设置为 recursive。


5、添加react-native应用

下面我们在原生ios应用中添加一个视图容器,用于展示react-native实现的内容。

在原生ios应用添加容器视图我们在工程文件下创建一个名为ReactView的UIView文件:ReactnativeIOS目录 -> 右键 -> New File -> Cocoa Touch Class -> ReactView,

6、更新App Transport Security

直接运行项目会报Could not connect to development server错误,在iOS 9以上的系统中,除非明确指明,否则应用无法通过http协议连接到localhost主机。 我们建议你在Info.plist文件中将localhost列为App Transport Security的例外。 如果不这样做,在尝试通过http连接到服务器时,会遭遇这个错误 - Could not connect to development server.

打开工程中的Info.list文件,添加下面配置即可:


7.启动开发服务器

在运行我们的项目之前,我们需要先启动我们的开发服务器。进入RNtest目录,然后启动。$ react-native start

六、运行ios项目

通过Xcode点击项目或者command + R运行项目,如果顺利的话,就会看到成功运行的界面:


Xcode运行结果
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,437评论 25 709
  • React Native优秀博客,以及优秀的Github库列表(很多英文资料源自于[awesome-react-n...
    董董董董董董董董董大笨蛋阅读 10,847评论 4 162
  • 需求: 最近准备在公司项目中使用RN,但罗马不是一天建成的,没办法将项目中所有的代码都换成RN,而且我也不认为全换...
    挂着铃铛的兔阅读 9,014评论 20 37
  • “与你年轻时的容貌相比,我更爱你现在备受岁月摧残的容颜”每每看到这句,其实都带给我不小的感触,每个人都是视觉动物,...
    巴拉巴拉炸阅读 281评论 0 2
  • 偶然的受伤 让你停止了飞翔 在温暖的鸟巢里 你有时间梳理羽毛和 无端的忧伤 天空很美 梦想无边 难得悠闲 曾经的努...
    端阳香草阅读 468评论 4 2