最新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运行项目，如果顺利的话，就会看到成功运行的界面：