[React Native]使用App Center CLI釋出CodePush更新--iOS簡易版

Phantom_iOS發表於2019-03-05
React NativeAPPiOS

面向

用RN開發iOS的小夥伴，並且想使用RN的熱更新功能，又不想在一大堆文件裡翻來覆去的，可以看看這個簡易版。覺得不錯的話可以點個贊或關注。附上詳細版。

主要步驟

  1. 安裝App Center CLI： npm install -g appcenter-cli

  2. 建立App Center帳戶或使用appcenter login命令通過CLI登入。這將啟動一個瀏覽器，要求您使用GitHub或Microsoft帳戶進行身份驗證。經過身份驗證後，它將建立一個“連結”到您的GitHub / MSA身份的CodePush帳戶，並生成一個訪問金鑰，您可以將其複製/貼上到CLI中以便登入。

  3. 在部署更新之前，您必須使用以下命令使用App Center建立應用程式： appcenter apps create -d <appDisplayName> -o <operatingSystem> -p <platform>

    例子:
appcenter apps create -d MyApp-Android -o Android -p React-Native
appcenter apps create -d MyApp-iOS -o iOS -p Cordova
複製程式碼

    貼士：將你要操作的應用程式設定為當前應用程式使用，省事。appcenter apps set-current <ownerName>/<appName>。 這樣可以把appcenter codepush deployment list -a <ownerName>/<appName>可以將命令縮短為appcenter codepush deployment list

  4. 使用CodePush，應用程式自動進行兩次部署（Staging和Production）。在App Center中，您必須使用以下命令自行建立它們：

appcenter codepush deployment add -a <ownerName>/<appName> Staging
appcenter codepush deployment add -a <ownerName>/<appName> Production
複製程式碼

  1. 建立部署後，您可以使用這兩種部署訪問部署金鑰，用於配置兩種部署環境。 appcenter codepush deployment list --displayKeys

  2. 安裝RNPM

    步驟 說明
    安裝 $ npm install rnpm -g
    安裝依賴 如果要安裝依賴項並在一次執行中連結它：$ rnpm install <name>
    連結依賴 如果您已經安裝了模組（但未連結），請執行：$ rnpm link

  3. 安裝外掛（iOS）

    步驟 說明
    步驟一 自React Native v0.27起，rnpm link已經合併到React Native CLI中。在專案中簡單地執行：react-native link react-native-code-push
    步驟二 系統將提示您輸入要使用的部署金鑰。如果您還沒有它，可以通過執行code-push deployment ls <appName> -k檢索，或者您可以選擇忽略它（通過簡單地點選<ENTER>）並在以後新增它。首先，我們建議您只使用Staging部署金鑰，以便可以端到端地測試CodePush。

  4. 基本使用如下

import codePush from "react-native-code-push";

export default class App extends React.Component {

  componentDidMount() {
    codepush.sync({ installMode: codepush.InstallMode.IMMEDIATE });
  }

  render() {
    return (
      <View style={{ backgroundColor: 'white', height: 100, marginTop: 100 }}>
        <TouchableOpacity onPress={this.onButtonPress}>
          <Text style={{ color: 'red' }}>Check for updates</Text>
        </TouchableOpacity>
        <Text style={{ marginTop: 30 }}>測試文字</Text>
      </View>
    )
  }

  onButtonPress() {
    codepush.sync({
      updateDialog: true,
      installMode: codepush.InstallMode.IMMEDIATE
    });
  }
}
let codePushOptions = { checkFrequency: codepush.CheckFrequency.MANUAL }

App = codepush(codePushOptions)(App)

複製程式碼

最後，在裝置上編譯一下，這裡我只試過真機，然後你可以把‘測試文字’改為‘測試文字更改’，然後釋出更新 appcenter codepush release-react

沒有指定當前應用程式的用這個：

appcenter codepush release-react -a <ownerName>/<appName>

appcenter codepush release-react -a <ownerName>/MyApp-iOS
appcenter codepush release-react -a <ownerName>/MyApp-Android
複製程式碼

然後就可以看效果啦。

轉載請註明出處。

相關文章