大楼不是一天所建成，是时间慢慢积累起来滴，原先用原生写的项目，没办法将项目中所有的代码都换成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运行结果
网友评论