zoukankan      html  css  js  c++  java
  • 现有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和原生来混合开发了。

  • 相关阅读:
    C# DataTable的用法详解
    Matlab绘图方法汇总
    java中Comparator的用法
    Java获取随机数
    jQuery动画高级用法——详解animation中的.queue()函数
    Oracle序列号详解
    jQuery验证框架教程
    二十四、按后退键退出Android程序
    同步synchronized用法
    jQuery 复选框全选反选
  • 原文地址:https://www.cnblogs.com/linjk/p/6207213.html
Copyright © 2011-2022 走看看