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


      在《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包含的所有包:

        

        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和原生来混合开发了。

  • 相关阅读:
    k8s资源需求和限制, 以及pod驱逐策略
    python转义引起的错误
    nginx location 匹配目录
    kubelet 证书自动续期
    docker常见退出码
    (转)firefox火狐浏览器语言设置
    去掉表的identity属性
    SQL Server内存方面知识收集
    SQL Server 中not in和not exists
    Data Compression(1)
  • 原文地址:https://www.cnblogs.com/linjk/p/6207213.html
Copyright © 2020-2023  润新知