现有iOS项目集成React Native过程记录

• Z时代
• 2024-01-10
• 分类：综合

　在搭建配置了RN的开发环境，然后，本文记录在现有iOS项目集成React Native的过程，官方推荐使用Cocoapods，项目一开始也是使用它，只是有时安装库很慢，还不如复制粘贴库来的快，就删除它了，这里就使用手动集成的方式吧。

　　1. 新增React Native文件路径和json说明文件，进入项目根目录(*.xcodeproj文件所在目录)：

　　　　mkdir reactnative

　　　　cd reactnative

　　　　vim package.json  : 用于初始化react native

　　　　文件内容为：

 　　　　执行"npm install"，会在当前目录(reactnative)生成node_modules子目录，里面包含react-native包含的所有包：

　　　　npm install完成：

　　2. 在reactnative目录下新增index.ios.js文件:

　　3. 添加React Native依赖包(添加自己需要用的包就可以了)：

　　　　1. 添加"React.xcodeproj"项目到现有项目：

　　　　2. 添加"RCTNetwork.xcodeproj":

　　　　3. 添加"RCTText.xcodeproj":

　　　　4. 添加"RCTWebSocket.xcodeproj":

　　　　5. 添加"RCTActionSheet.xcodeproj":

　　　　添加完后项目结构如下：

　　4. 添加frameworks:

　　5. 添加搜索的头文件地址：

　　　　在Header Search Paths增加一行：

　　　　增加后如下：

　　6. 运行，报如下错误：

　　　　 在方法前加"(void)"即可，如下：

　　　　还有一个属性访问错误，很简单，修改即可。再次编译，可以了。

　　7. 测试react native功能：

　　　　1. 增加View，用来显示react native的文件内容：

　　　　2. 实现ReactViewTest.m :

　　　　3. 自定义view完成了，编写控制器将其展现出来：

　　8. 测试运行

　　　　先启动react-native服务端：

　　　　在reactnative目录下执行："react-native start"

　　　　在项目的info.plist增加配置：

　　　　这里使用的是真机调试，因此，需要修改localhost为ip地址，且电脑和手机需要连接在同一个网络。

　　　　运行：

　　　　结果如下：

　　　　服务端输出如下：

　　　　可以看到，每次修改js文件，都是动态更新页面传输到手机上，刷新重新显示即可。

　　9. 发布时：

　　　　开发时从服务端获取渲染文件，发布时，就需要将文件打包为main.jsbundle了：

　　　　使用命令”curl http://192.168.1.102:8081/index.ios.bundle -o main.jsbundle“

　　　　在项目添加这个文件，修改ReactViewTest:

　　　　为了测试效果，关闭react native服务端，运行APP，可以正确从本地加载显示，完成了。

　　　　后面就可以按需继续使用js和原生来混合开发了。

以上是 现有iOS项目集成React Native过程记录 的全部内容， 来源链接： utcz.com/z/382357.html