React Native入门指南

作者: 前端连环话 | 来源:发表于2018-09-19 14:50 被阅读0次

本文为React Native开发的入门介绍，包括搭建环境，开发调试，编译打包，版本发布，热更新等方面的基本讲解，通过这些环节的尝试，可以快速了解基于React Native的原生APP开发流程及注意事项

注意：仅适应于以下平台的开发

开发平台：Windows 目标平台：Android

搭建环境

1、Node。React Native是基于Node开发的，Node安装版本必须高于8.3，Node下载地址安装完成后可通过命令行查看当前版本。

查看Node和npm版本

安装完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及更高版本），安装完成后需要配置环境变量。如下图

JDK环境变量配置

配置路径：此电脑-->属性-->高级系统设置-->（高级）环境变量-->新建（用户变量/系统变量都可以）

JAVA_HOME：JDK安装目录，如C:\Program Files\Java\jdk1.8.0_121

CLASSPATH：.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar

查看JDK版本

3、Android Studio。请参考 Android开发环境搭建

4、Android NDK。如果你的React Native版本低于0.45，那NDK是必须要装的，版本最好选用r10e。NDK下载地址并设置环境变量ANDROID_NDK_HOME，指向你的NDK根目录（例如E:\android-ndk-r10e，同JDK环境变量设置）

NDK环境变量

开发调试

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。注意版本号必须精确到两个小数点。

正常情况会生成这样的项目：

react native项目结构

3、打开Android模拟器。利用安装好的Android Studio和模拟器实现手机效果预览。在Android Studio界面，通过File-->open菜单把新建的myApp项目的android/app文件打开，等待项目构建。。。（可能需要几分钟）。成功之后打开模拟器，并启动，如下图：

导入项目

启动模拟器

Android模拟器

注意：启动模拟器时，如果没有任何响应，请检查电脑虚拟化是否已启动，如果是禁用的，则需要进入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);

}

// ... 其它代码

}