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

时间:2022-11-07 05:02:58

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

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

    mkdir reactnative

    cd reactnative

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

    文件内容为:

{
"name": "<项目名称>",
"version": "3.0.1612090",
"private": true,
"dependencies": {
"react": "^0.14.8",
"react-native": "^0.22.2"
}
}

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

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

    npm install完成:

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

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

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

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

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

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

    2. 添加"RCTNetwork.xcodeproj":

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

    3. 添加"RCTText.xcodeproj":

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

    4. 添加"RCTWebSocket.xcodeproj":

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

    5. 添加"RCTActionSheet.xcodeproj":

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

    添加完后项目结构如下:

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

  4. 添加frameworks:

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

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

    在Header Search Paths增加一行:

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

    增加后如下:

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

  6. 运行,报如下错误:

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

     在方法前加"(void)"即可,如下:

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

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

  7. 测试react native功能:

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

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

    2. 实现ReactViewTest.m :

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

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

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

  8. 测试运行

    先启动react-native服务端:

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

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

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

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

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

    运行:

    结果如下:

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

    服务端输出如下:

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

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

  9. 发布时:

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

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

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

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

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

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

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