react-native 使用 code-push 熱更新

1. 全局安裝code-push-cli

npm install -g code-push-cli

2. 註冊code-push帳號

code-push register
Please login to Mobile Center in the browser window we've just opened.

Enter your token from the browser: 
#會彈出一個瀏覽器,讓你註冊,可以使用github帳號對其進行授權,授權成功會給一串Token,點擊複製,在控制進行粘貼回車或者使用code-push login命令。

Enter your token from the browser:  casfwa1234xxxxxxxxxxxxxxxxx
#如果成功的話會有下面提示:
Successfully logged-in. Your session file was written to /Users/huanghuanlai/.code-push.config. You can run the code-push logout command at any time to delete this file and terminate your session.

3. 在code-push添加一個ios的app

code-push app add ios-app iosreact-native
#成功提示如下方
Successfully added the "ios-app" app, along with the following default deployments:
┌────────────┬──────────────────────────────────────────────────────────────────┐
│ Name       │ Deployment Key                                                   │
├────────────┼──────────────────────────────────────────────────────────────────┤
│ Production │ eWkbCo*************************************2a6 │
├────────────┼──────────────────────────────────────────────────────────────────┤
│ Staging    │ sYvp***************************************2a6 │
└────────────┴──────────────────────────────────────────────────────────────────┘

4. 在code-push添加一個android的app

code-push app add android-app android react-native
#成功提示如下方
Successfully added the "android-app" app, along with the following default deployments:
┌────────────┬──────────────────────────────────────────────────────────────────┐
│ Name       │ Deployment Key                                                   │
├────────────┼──────────────────────────────────────────────────────────────────┤
│ Production │ yGi8q**********42a6 │
├────────────┼──────────────────────────────────────────────────────────────────┤
│ Staging    │ fqdFC**********42a6 │
└────────────┴──────────────────────────────────────────────────────────────────┘

5. 在項目根目錄添加react-native-code-push

npm install react-native-code-push --save

6.配置 react-native-code-push
不同版本的react-native需要執行不同的操作,本文react-native是0.60以上版本,不執行link操作。可以點擊此處查看 Android 不同版本的具體操作,點擊此處查看 IOS 不同版本的具體操作。

// 第一步 找到 android/app/build.gradle 文件,添加以下新增代碼
apply from: "../../node_modules/react-native/react.gradle"
// new code
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

// 第二步 修改 MainApplication.java 文件
// new code
import com.microsoft.codepush.react.CodePush;
public class MainApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        ...
        // new code
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }
    };
}

// 第三步 修改 strings.xml 文件,
<resources>
     <string name="app_name">AppName</string>
     // new code , DeploymentKey處填寫你的key
     <string moduleConfig="true" name="CodePushDeploymentKey">DeploymentKey</string>
 </resources>

7. 在需要做更新操作的文件添加以下代碼

import codePush from "react-native-code-push";
const codePushOptions = { checkFrequency: codePush.CheckFrequency.MANUAL };
export default class App extends Component<{}> {

  componentDidMount(){
    codePush.sync({
      updateDialog: true,
      installMode: codePush.InstallMode.IMMEDIATE,
      mandatoryInstallMode:codePush.InstallMode.IMMEDIATE,
      //deploymentKey爲剛纔生成的,用Platform判斷下平臺
      deploymentKey: Platform.OS === 'ios'?'sYvpLUxuBU9FxICqJ5sccL2GDUPZcc988a73-c917-4dba-bd40-1837998442a6':'fqdFCqLyL4XclNZjWvNN3KNhImR5cc988a73-c917-4dba-bd40-1837998442a6',
      });
  }

8. 模擬器上運行項目

react-native run-ios
or
react-native run-android

9. 發佈一個ios/android新版本
執行:code-push release-react ios-app ios 或code-push release-react android-app android

Detecting ios app version:

Using the target binary version value "1.0" from "ios/vv/Info.plist".

Running "react-native bundle" command:

node node_modules/react-native/local-cli/cli.js bundle --assets-dest /var/folders/w5/lh1853r53v9c07p_1m6blttm0000gn/T/CodePush/CodePush --bundle-output /var/folders/w5/lh1853r53v9c07p_1m6blttm0000gn/T/CodePush/CodePush/main.jsbundle --dev false --entry-file index.js --platform ios
Scanning folders for symlinks in /Users/ct/Desktop/demo/vv/node_modules (20ms)
Scanning folders for symlinks in /Users/ct/Desktop/demo/vv/node_modules (100ms)
Loading dependency graph, done.

bundle: Writing bundle output to: /var/folders/w5/lh1853r53v9c07p_1m6blttm0000gn/T/CodePush/CodePush/main.jsbundle
bundle: Done writing bundle output

Releasing update contents to CodePush:

Upload progress:[==================================================] 100% 0.0s
Successfully released an update containing the "/var/folders/w5/lh1853r53v9c07p_1m6blttm0000gn/T/CodePush/CodePush" directory to the "Staging" deployment of the "3271450-ios" app.

發佈完以後,進入app就會提示更新。
10. 需要用戶強制更新

code-push release-react android-app android --m true

11. 發佈帶版本的更新
在app 版本號默認的情況下以上是沒問題,但app肯定是需要迭代的!
需要使用下面命令:

code-push release-react <Appname> <Platform> --t <本更新包面向版本號> --des <本次更新說明(可不加)> --m true < --m true 可不加>
code-push release-react android-app android --t 1.0.1;  //非強制更新(1.0.1是versionNmae)
code-push release-react android-app android --t 1.0.1 --m true; //強制更新(1.0.1是versionNmae)

注意:修改了原生文件代碼(例如MainActivity.java等原生文件,或者添加新插件)時CodePush是無法進行更新的,必須通過提交到應用商店進行更新!!!


如果想要自定義 code-push 更新面板,可以點擊此處查看。
如果想要了解更多code-push常用命令,可以點擊此處查看。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章