? ? ? ? ?本文為React Native開發(fā)的入門介紹，包括搭建環(huán)境，開發(fā)調試，編譯打包，版本發(fā)布，熱更新等方面的基本講解，通過這些環(huán)節(jié)的嘗試，可以快速了解基于React Native的原生APP開發(fā)流程及注意事項

?注意：僅適應于以下平臺的開發(fā)? ? ? ? ? ? ? ? ? ? ? ? ??

開發(fā)平臺：Windows? ? ? ? 目標平臺：Android

搭建環(huán)境

1、Node。React Native是基于Node開發(fā)的，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及更高版本），安裝完成后需要配置環(huán)境變量。如下圖

JDK環(huán)境變量配置

配置路徑：此電腦-->屬性-->高級系統(tǒng)設置-->（高級）環(huán)境變量-->新建（用戶變量/系統(tǒng)變量都可以）? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

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開發(fā)環(huán)境搭建

4、Android NDK。如果你的React Native版本低于0.45，那NDK是必須要裝的，版本最好選用r10e。NDK下載地址?并設置環(huán)境變量ANDROID_NDK_HOME，指向你的NDK根目錄（例如E:\android-ndk-r10e，同JDK環(huán)境變量設置）

NDK環(huán)境變量

開發(fā)調試

1、安裝react-native-cli，在cmd里輸入以下命令即可

npm install -g react-native-cli

2、新建項目名為myApp的react-native項目。（以下示例均以react-native0.44.0版本為例）

react-native init myApp

提示：你可以使用--version?參數(shù)（注意是兩個桿）創(chuàng)建指定版本的項目，例如：react-native init myApp --version 0.44.0。注意版本號必須精確到兩個小數(shù)點。

正常情況會生成這樣的項目：

react native項目結構

3、打開Android模擬器。利用安裝好的Android Studio和模擬器實現(xiàn)手機效果預覽。在Android Studio界面，通過File-->open菜單把新建的myApp項目的android/app文件打開，等待項目構建。。。（可能需要幾分鐘）。成功之后打開模擬器，并啟動，如下圖：

導入項目

啟動模擬器

Android模擬器

注意：啟動模擬器時，如果沒有任何響應，請檢查電腦虛擬化是否已啟動，如果是禁用的，則需要進入BIOS開啟，如何開啟？

檢查是否啟用虛擬化

4、在模擬器上運行。cmd進入到myApp目錄后，運行如下命令：

react-native run-android

等待數(shù)分鐘后，cmd出現(xiàn)如下信息，即構建成功，看看模擬器上運行效果吧

構建成功

運行效果

用你喜歡的編輯器修改index.android.js代碼，保存代碼后，在模擬器上雙擊R鍵，看看效果吧。。。

編譯打包

?????????Android要求所有應用都有一個數(shù)字簽名才會被允許安裝在用戶手機上，所以在把應用發(fā)布到類似Google Play store這樣的應用市場之前，你需要先生成一個簽名的 APK 包。參考官方文檔

1、生成一個簽名秘鑰。你可以用keytool命令生成一個私有秘鑰，在Windows上keytool命令放在JDK的bin目錄中（比如C:\Program Files\Java\jdk1.8.0_121\bin），以管理員身份打開cmd，進入bin目錄執(zhí)行以下命令：

keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

這條命令會讓你輸入秘鑰庫和對應秘鑰的密碼，然后設置一些相關的信息，最終會生成一個叫做my-release-key.keystore的秘鑰庫文件，有效期為10000天，--alias 參數(shù)后面的別名是你將來為應用簽名時所需要用到的，所以記得記錄這個別名和密碼

生成簽名秘鑰

2、設置gradle變量。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?把my-release-key.keystore文件放到你工程中的android/app文件夾下。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?編輯~/.gradle/gradle.properties（全局配置，對所有項目有效）或是項目目錄/android/gradle.properties（項目配置，只對所在項目有效）。如果沒有gradle.properties文件你就自己創(chuàng)建一個，添加如下的代碼（注意把其中的****替換為相應密碼）? ? ?

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、生成發(fā)行APK包，在終端運行以下命令：

cd android? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? gradlew assembleRelease

注意：請確保 gradle.properties 中沒有包含_org.gradle.configureondemand=true_，否則會跳過 js 打包的步驟，導致最終生成的 apk 是一個無法運行的空殼。

生成的APK位于android/app/build/outputs/apk/app-release.apk，它已經可以用來發(fā)布了。

5、調試，請參考官方文檔

版本發(fā)布&熱更新

????????熱更新有兩種比較好方案，一是微軟提供的codepush，另一種是react native中文網(wǎng)提供的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、登錄與創(chuàng)建應用

首頁請先在pushy官網(wǎng)注冊賬號，然后在你的項目根目錄下運行以下命令

pushy login? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? email:<輸入你的注冊郵箱>? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? password:<輸入你的密碼>

這會在項目文件夾下創(chuàng)建一個.update文件，注意不要把這個文件上傳到Git等CVS系統(tǒng)上。你可以在.gitignore末尾增加一行.update來忽略這個文件。

登錄之后可以創(chuàng)建應用。注意iOS平臺和安卓平臺需要分別創(chuàng)建（兩次輸入的名字可以相同，這沒有關系。）：

pushy createApp --platform ios? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? App name:<輸入應用名稱>? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? pushy createApp --platform android? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?App name:<輸入應用名稱>

如果你已經在網(wǎng)頁端或者其它地方創(chuàng)建過應用，也可以直接選擇應用：

pushy selectApp --platform ios? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1)?項目一(ios)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2) 項目二(ios)? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

Total 2 ios apps? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Enter appId:<輸入應用前面的編號>

選擇或者創(chuàng)建過應用后，你將可以在文件夾下看到update.json文件，其內容類似如下形式：