react-native android熱更新詳解（1）

快速入門-準備工作

首先你應該有一個基於React Native開發的應用，我們把具有package.json的目錄叫做你的"應用根目錄"。

如果你還沒有初始化應用，請參閱開始使用React Native。

所以我們也假設你已經擁有了開發React Native應用的一切環境，包括Node.js、npm、XCode、Android SDK等等。

安裝

在你的項目根目錄下運行以下命令：

npm i -g react-native-update-cli
npm i react-native-update --save

如果下載極慢或者顯示網絡失敗，請設置使用淘寶鏡像npx nrm use taobao

如果你的RN版本 >= 0.60，請在iOS目錄下執行:

pod install

如果你的RN版本 < 0.60，那麼還需要手動link

 如果你的RN版本比較老（< 0.46），請點擊這裏的注意事項

請記得一定要重新編譯（react-native run-ios或run-android命令編譯，或在Xcode/Android Studio中重新編譯）。

一、手動link

如果RN版本 >= 0.60則可以跳過此步驟

iOS

RN < 0.60且使用CocoaPods（推薦）

RN < 0.60且不使用CocoaPods

Android

RN < 0.60

二、配置Bundle URL

注意此步驟無論任何版本，目前都需要手動配置。

iOS

1. (RN >= 0.60或者使用CocoaPods集成此步可跳過)在工程target的Build Phases->Link Binary with Libraries中加入libz.tbd、libbz2.1.0.tbd

2. 在你的AppDelegate.m文件中增加如下代碼：

3. // ... 其它代碼
   
   #import "RCTHotUpdate.h"
   
   // 如果RN版本 >= 0.59，修改sourceURLForBridge
   - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
   {
   #if DEBUG
     return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
   #else
     // 非DEBUG情況下替換爲熱更新bundle
     return [RCTHotUpdate bundleURL];
   #endif
   }
   
   // 如果RN版本 < 0.59，修改didFinishLaunchingWithOptions
   - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
   {
   #if DEBUG
     // 原來的jsCodeLocation保留在這裏
     jsCodeLocation = ..........
   #else
     // 非DEBUG情況下替換爲熱更新bundle
     jsCodeLocation = [RCTHotUpdate bundleURL];
   #endif
     // ... 其它代碼
   }

   Android

   在MainApplication中增加如下代碼：

// ... 其它代碼

// 請注意不要少了這句import
import cn.reactnative.modules.update.UpdateContext;
public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    protected String getJSBundleFile() {
        return UpdateContext.getBundleUrl(MainApplication.this);
    }
    // ... 其它代碼
  }
}

三、登錄與創建應用

首先請在https://update.reactnative.cn註冊帳號，然後在你的項目根目錄下運行以下命令：

$ 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文件，其內容類似如下形式：

{
    "ios": {
        "appId": 1,
        "appKey": "<一串隨機字符串>"
    },
    "android": {
        "appId": 2,
        "appKey": "<一串隨機字符串>"
    }
}

你可以安全的把update.json上傳到Git等CVS系統上，與你的團隊共享這個文件，它不包含任何敏感信息。當然，他們在使用任何功能之前，都必須首先輸入pushy login進行登錄。

至此應用的創建/選擇就已經成功了。下一步，你需要給代碼添加相應的功能，請參閱添加熱更新功能