本文为React Native开发的入门介绍，包括搭建环境，开发调试，编译打包，版本发布，热更新等方面的基本讲解，通过这些环节的尝试，可以快速了解基于React Native的原生APP开发流程及注意事项
注意：仅适应于以下平台的开发
开发平台：Windows 目标平台：Android
搭建环境
1、Node。React Native是基于Node开发的，Node安装版本必须高于8.3，Node下载地址 安装完成后可通过命令行查看当前版本。
安装完Node后建议设置npm镜像以加速后面的过程
npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --global
2、Java SE Development Kit(JDK)。JDK下载地址 JDK的版本必须是1.8（目前不支持1.9及更高版本），安装完成后需要配置环境变量。如下图
配置路径：此电脑-->属性-->高级系统设置-->（高级）环境变量-->新建（用户变量/系统变量都可以）
JAVA_HOME：JDK安装目录，如C:\Program Files\Java\jdk1.8.0_121
CLASSPATH：.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar
3、Android Studio。请参考 Android开发环境搭建
4、Android NDK。如果你的React Native版本低于0.45，那NDK是必须要装的，版本最好选用r10e。NDK下载地址 并设置环境变量ANDROID_NDK_HOME，指向你的NDK根目录（例如E:\android-ndk-r10e，同JDK环境变量设置）
开发调试
1、安装react-native-cli，在cmd里输入以下命令即可
npm install -g react-native-cli
2、新建项目名为myApp的react-native项目。（以下示例均以react-native0.44.0版本为例）
react-native init myApp
提示：你可以使用--version 参数（注意是两个杆）创建指定版本的项目，例如：react-native init myApp --version 0.44.0。注意版本号必须精确到两个小数点。
正常情况会生成这样的项目：
3、打开Android模拟器。利用安装好的Android Studio和模拟器实现手机效果预览。在Android Studio界面，通过File-->open菜单把新建的myApp项目的android/app文件打开，等待项目构建。。。（可能需要几分钟）。成功之后打开模拟器，并启动，如下图：
注意：启动模拟器时，如果没有任何响应，请检查电脑虚拟化是否已启动，如果是禁用的，则需要进入BIOS开启，如何开启？
4、在模拟器上运行。cmd进入到myApp目录后，运行如下命令：
react-native run-android
等待数分钟后，cmd出现如下信息，即构建成功，看看模拟器上运行效果吧
用你喜欢的编辑器修改index.android.js代码，保存代码后，在模拟器上双击R键，看看效果吧。。。
编译打包
Android要求所有应用都有一个数字签名才会被允许安装在用户手机上，所以在把应用发布到类似Google Play store这样的应用市场之前，你需要先生成一个签名的 APK 包。参考官方文档
1、生成一个签名秘钥。你可以用keytool命令生成一个私有秘钥，在Windows上keytool命令放在JDK的bin目录中（比如C:\Program Files\Java\jdk1.8.0_121\bin），以管理员身份打开cmd，进入bin目录执行以下命令：
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
这条命令会让你输入秘钥库和对应秘钥的密码，然后设置一些相关的信息，最终会生成一个叫做my-release-key.keystore的秘钥库文件，有效期为10000天，--alias 参数后面的别名是你将来为应用签名时所需要用到的，所以记得记录这个别名和密码
2、设置gradle变量。 把my-release-key.keystore文件放到你工程中的android/app文件夹下。 编辑~/.gradle/gradle.properties（全局配置，对所有项目有效）或是项目目录/android/gradle.properties（项目配置，只对所在项目有效）。如果没有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=*****
上面的这些会作为 gradle 的变量，在后面的步骤中可以用来给应用签名。
3、把签名配置加入到项目的gradle配置中。编辑你项目目录下的android/app/build.gradle，添加如下的签名配置：
...
android {
...
defaultConfig { ... }
signingConfigs {
release {
if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
storeFile file(MYAPP_RELEASE_STORE_FILE)
storePassword MYAPP_RELEASE_STORE_PASSWORD
keyAlias MYAPP_RELEASE_KEY_ALIAS
keyPassword MYAPP_RELEASE_KEY_PASSWORD
}
}
}
buildTypes {
release {
...
signingConfig signingConfigs.release
}
}
}
...
4、生成发行APK包，在终端运行以下命令：
cd android gradlew assembleRelease
注意：请确保 gradle.properties 中没有包含_org.gradle.configureondemand=true_，否则会跳过 js 打包的步骤，导致最终生成的 apk 是一个无法运行的空壳。
生成的APK位于android/app/build/outputs/apk/app-release.apk，它已经可以用来发布了。
5、调试，请参考官方文档
版本发布&热更新
热更新有两种比较好方案，一是微软提供的codepush，另一种是react native中文网提供的pushy。本文以pushy为例。参考
1、安装依赖
npm install -g react-native-update-cli npm install --save react-native-update@具体版本请看下面的表格 npm install react-native link react-native-update
因为React Native不同版本代码结构不同，因而请按下面表格对号入座
2、手动link。
如果第一步的react-native link已成功，可以跳过此步骤
a、在android/settings.gradle中添加如下代码: include ':react-native-update' project(':react-native-update').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-update/android')
b、在android/app/build.gradle的 dependencies 部分增加如下代码: compile project(':react-native-update')
c、检查你的RN版本,如果是0.29及以上, 打开android/app/src/main/java/[...]/MainApplication.java,否则打开android/app/src/main/java/[...]/MainActivity.java 在文件开头增加 import cn.reactnative.modules.update.UpdatePackage; 在getPackages() 方法中增加 new UpdatePackage()(注意上一行可能要增加一个逗号)
3、配置Bundle URL(Android)
0.29及以后版本：在你的MainApplication中增加如下代码：
// ... 其它代码
import cn.reactnative.modules.update.UpdateContext;
public classMainApplicationextendsApplicationimplementsReactApplication{
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
protected String getJSBundleFile() {
return UpdateContext.getBundleUrl(MainApplication.this);
}
// ... 其它代码 }
}
0.28及以前版本：在你的MainActivity中增加如下代码：
// ... 其它代码
import cn.reactnative.modules.update.UpdateContext;
public classMainActivityextendsReactActivity{
@Override
protected String getJSBundleFile() {
return UpdateContext.getBundleUrl(this);
}
// ... 其它代码
}
4、登录与创建应用
首页请先在pushy官网注册账号，然后在你的项目根目录下运行以下命令
pushy login email:<输入你的注册邮箱> password:<输入你的密码>
这会在项目文件夹下创建一个.update文件，注意不要把这个文件上传到Git等CVS系统上。你可以在.gitignore末尾增加一行.update来忽略这个文件。
登录之后可以创建应用。注意iOS平台和安卓平台需要分别创建（两次输入的名字可以相同，这没有关系。）：
pushy createApp --platform ios App name:<输入应用名称> pushy createApp --platform android App name:<输入应用名称>
如果你已经在网页端或者其它地方创建过应用，也可以直接选择应用：
pushy selectApp --platform ios 1) 项目一(ios) 2) 项目二(ios)
Total 2 ios apps Enter appId:<输入应用前面的编号>
选择或者创建过应用后，你将可以在文件夹下看到update.json文件，其内容类似如下形式：
5、上传安卓应用
pushy uploadApk android/app/build/outputs/apk/app-release.apk
6、发布新的热更新版本
pushy bundle --platform <ios|android>
完整示例代码请参考这里，恭喜你，到此为止，已经完成了全部植入代码热更新的工作。客户端可以检查到更新并进行更新了。
附：
参考文档：
