美文网首页
React Native开发记录

React Native开发记录

作者: 嗯这是网名 | 来源:发表于2019-12-20 17:33 被阅读0次

    一、环境搭建

    官方教程已经介绍的很详细了,按步骤操作,需要注意的是必须要有稳定的梯子,否则你连Hello Word都看不到。

    注意:第一次执行react-native run-android需要走梯子下载大量依赖,如果遇到错误,99%的情况都是因为翻墙失败了,可以尝试换不同节点的梯子多次尝试。

    1.执行react-native run-android报错

    如果梯子稳定的前提下,遇到类似下图中的错误
    image.png
    报错提示找不到kotlin-stdlib.jar这个包,并在下方给出了下载地址,复制这个链接到浏览器看是否能正常下载,如果可以,拿着下载好的jar包放到下方对应的目录下
    C:\Users\Administrator\.gradle\caches\modules-2\files-2.1
    
    这里提示我缺省kotlin-stdlib.jar这个包,那我就把下载好的这个包放到以下目录下
    //这是报错提示的下载地址
    https://jcenter.bintray.com/org/jetbrains/kotlin/kotlin-stdlib/1.2.71/kotlin-stdlib-1.2.71.jar
    
    //下载好之后,将这个包移动到对应文件,对应版本(可能有多个以哈希值命名的文件夹,我是将所有的文件夹都做了替换操作)的目录下,如果目录下已经有以.pom文件,删除此文件
    C:\Users\Administrator\.gradle\caches\modules-2\files-2.1\org.jetbrains.kotlin\kotlin-stdlib\1.2.71
    
    以此类推,直到报错中不出现网址。

    React Native 中文网
    参考资料

    二、打包

    (1)Android打包
    按照官方文档一步一步操作。
    1.修改APP包名

    //目录文件路径
    android\app\src\main\res\values\strings.xml
    //修改代码
    <resources>
        <string name="app_name">这是你的APP名</string>
    </resources>
    

    2.修改APP应用图标

    //目录文件路径
    android\app\src\main\res
    //文件夹
    mipmap-hdpi
    mipmap-mdpi
    mipmap-xhdpi
    mipmap-xxhdpi
    mipmap-xxxhdpi
    

    (2)Ios打包
    将ios文件目录下以.xcworkspace的文件用Xcode打开,此时你的目录结构可能是这样的

    image.png

    接下来按步骤操作
    1.在React-native项目根目录下新建 release_ios 文件夹
    2.执行以下命令,生成jsbundle文件和静态资源文件夹及相关依赖

    react-native bundle --entry-file index.js --platform ios --dev false --bundle-output release_ios/main.jsbundle --assets-dest release_ios/
    

    3.将release_ios文件夹下生成的所有文件拖入跟项目名称同名的文件夹下

    image.png
    4.编译项目,build一下看是否有报错
    image.png
    5.开始打包,选择Product菜单下的Archive选项,下一步下一步就可以了。
    如果Archive选项置灰不可点击,将左上角编译设备选择为第一个默认选项

    三、如何通过web页面下载APP

    ios包

    1.将ipa文件上传到服务器的某个目录下,;
    2.下载manifest.plist文件,并修改其中ipa下载地址和logo下载地址为你的文件存放地址(logo文件也需要放上去)
    3.新建一个html文件,设置a标签的href如下

    //https://xxx.xxx.cn/public/ttst/manifest.plist为你的manifest文件的地址
    <a href="itms-services://?action=download-manifest&url=https://xxx.xxx.cn/public/ttst/manifest.plist">点击下载</a>
    

    Android包

    1.将打包出来的.apk文件放到服务器目录下
    2.新建一个html文件,设置a标签的href如下

    <a href="xxx.xxx.com/.apk">点击下载</a>
    

    相关文章

      网友评论

          本文标题:React Native开发记录

          本文链接:https://www.haomeiwen.com/subject/pztbictx.html