React-Native从搭建环境到 发布 APP 指北

41次阅读

共计 2514 个字符,预计需要花费 7 分钟才能阅读完成。

开始前的话语:
1、由于 andriod studio 不易下载,并且占用内存大,运行的 AVD 模拟器非常迟钝。所以本文采用 genymotion 模拟器搭建,它更加轻量,运行更流畅。2、由于很多学习 react 的用户,都是在 windows 电脑上开发,完了顺便学习下 react-native,所以本文是用于搭建 android 环境的(mac 电脑没钱买,但不好意思说)
开发环境要求:Node 的版本必须高于 8.3,Python 的版本必须为 2.x(不支持 3.x),而 JDK 的版本必须是 1.8(目前不支持 1.9 及更高版本)android 版本为 9(由于最新的 react native 默认为 9,其实其他版本也行,但要改配置,比较麻烦)
一、环境搭建
1、jdk 下载及其环境变量配置
如果学过 java,则忽略本步骤。如果小白,则继续阅读点击 JDK 官网,下载对应版本的 jdk,然后双击安装。然后一路“下一步”。
默认会安装在 C 盘 C:Program FilesJavajdk1.8.0_201 路径下
配置环境变量桌面 –> 我的电脑 –> 右键——> 属性
点击 ” 高级系统设置 ”
点击 ” 环境变量 ”
编辑用户变量 Path
新建,将刚才安装的 jdk 路径复制到输入框中。最后别忘了,点击“确定”关闭对话框。
然后打开 cmd,输入
>java -version
如果出现版本号,则说明 jdk 配置完毕。
2、python 下载及其环境变量配置
进入 Python 官网下载对应版本,然后双击安装,默认一路“下一步”类似 jdk 环境变量,将 python 的安装路径,配置到环境变量中。
3、SDK 下载
虽然我们不需要 android studio 来开发 react-native,但是在启动 react 时,如果启动的是 android,则还是要 sdk 包的支持和编译。才能将 app 安装到 genymotion 模拟器中运行。
我们只需要下载 sdk manage 来管理 sdk 包,可以不用任何翻墙和代理,即可下载。速度还很快
这是我的 sdk manage 的百度网盘地址: 链接:https://pan.baidu.com/s/1uUmz… 提取码:m3fl
下载完,双击安装,一路 ” 下一步 ”。然后配置 sdk 的环境变量,但是需要注意,不是加入到 path 中,而是新建个名为 ANDROID_HOME 的变量,然后将刚才 sdk 安装的路径设置到变量值中
然后,进入到 sdk 安装目录,找到 s 并双击打开。
找到 android 9,展开
勾选这两个,然后点击右下角 install packages,稍微等待会,即可看到这两个包后面的 ”not installed” 变成了 ”installed”
二、Genymotion 模拟器下载
genymotion 官网下载前,必须要注册账号,并登陆。
登陆成功后,点击右上角红色的 ”Download”
由于我们是个人用户,所以往页面下方拉,会看到 ”Get Genymotion personal version”, 点击进入下载。
下载上方的包含有 VirtualBox 的版本。
下载成功并安装。
启动桌面上的 ”Genymotion” 快捷方式,打开 genymotion.
进入 setting
首先登陆
配置 ADB 中的 sdk 为刚才安装 sdk 的目录。然后关闭
选择 android 9 版本的模拟器,并安装

模拟器安装成功后,start 启动
出现如下的页面,即可表明启动成功。
三、react native 项目创建
首先安装 react-native-cli
>npm install -g yarn react-native-cli
然后使用 init,创建项目,官网实例名为 AwesomeProject,咱们也用这个吧。
react-native init AwesomeProject
进入 AwesomeProject 项目
cd AwesomeProject
react-native run-android
即可在模拟器上看到 react-native 中的内容
使用 vscode 打开 AwesomeProject 项目,打开 App.js, 在 render 中稍微修改文字,并打开 genymotion 模拟器,双击键盘 R 键 (自己办公桌的键盘,不是 genymotion 模拟器的软键盘),即可刷新模拟器上的页面。
同时,在 android 的 outputs 文件夹下,可以编译好的 apk,但是这个 apk 是没有经过数字证书认证的,无法发布到应用商店的。
四、采用数字证书编译 App
使用管理员权限打开 cmd 命令行工具,然后进入到 jdk 的 bin 目录:C:Program FilesJavajdk1.8.0_201bin 目录然后再控制台输入如下命令:
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

然后会提示你输入秘钥密码,地区,行政区,国家等等,完成后。在 bin 目录下会有个 my-release-key.keystore 文件
将次秘钥文件复制到 react native 项目的 androiud/app 下
修改 gradle.properties 文件,加入如下代码:
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****
注意 ** 部分要用你刚才申请秘钥时输入的密码替换
进入 android/app/build.gradle 中,编辑文件,新增红色部分。
然后进入到 android 目录下,输入命令。
gradlew assembleRelease
即可使用数字证书来打包 app,成功后,会在 apk 下多出来一个 realese 文件夹 (如果没有,点击右上角刷新)
为了确保发布到应用商店的 apk 没有问题,我们还得把这个 apk 在 genymotion 模拟器上运行下,来简单测试下输入命令
>react-native run-android –variant=release
即可在模拟器上,看到有个 app 被安装上了。

正文完
 0