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

开始前的话语：

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被安装上了。