? ? ? ? ?本文為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鏡像以加速后面的過程? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
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)境變量。如下圖
配置路徑：此電腦-->屬性-->高級系統(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
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)境變量設置）
開發(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ù)點究恤。
正常情況會生成這樣的項目：
3状答、打開Android模擬器柒爵。利用安裝好的Android Studio和模擬器實現(xiàn)手機效果預覽。在Android Studio界面楞抡，通過File-->open菜單把新建的myApp項目的android/app文件打開瓢湃，等待項目構建理张。。绵患。（可能需要幾分鐘）雾叭。成功之后打開模擬器，并啟動落蝙，如下圖：
注意：啟動模擬器時织狐，如果沒有任何響應，請檢查電腦虛擬化是否已啟動筏勒，如果是禁用的移迫，則需要進入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中文網提供的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官網注冊賬號贩耐，然后在你的項目根目錄下運行以下命令
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:<輸入應用名稱>
如果你已經在網頁端或者其它地方創(chuàng)建過應用抛蚤，也可以直接選擇應用：
pushy selectApp --platform ios? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1)?項目一(ios)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2) 項目二(ios)? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
Total 2 ios apps? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Enter appId:<輸入應用前面的編號>
選擇或者創(chuàng)建過應用后，你將可以在文件夾下看到update.json文件寻狂，其內容類似如下形式：
5岁经、上傳安卓應用
pushy uploadApk?android/app/build/outputs/apk/app-release.apk
6、發(fā)布新的熱更新版本
pushy bundle --platform <ios|android>
完整示例代碼請參考這里蛇券，恭喜你缀壤，到此為止，已經完成了全部植入代碼熱更新的工作纠亚√聊剑客戶端可以檢查到更新并進行更新了。
?附：
參考文檔：
