React Native开发记录

一、环境搭建

官方教程已经介绍的很详细了，按步骤操作，需要注意的是必须要有稳定的梯子，否则你连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
//修改代码

    这是你的APP名

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文件的地址
点击下载

Android包

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

点击下载