[React Native]使用App Center CLI发布CodePush更新--iOS简易版

Phantom吃饭用桶
2,034 阅读3分钟

面向

用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

然后就可以看效果啦。

转载请注明出处。

avatar
文章
阅读
粉丝