RN学习（三）——CodePush打包及效果展示-白红宇

Xcode配置CodePush的key

1.打开Xcode，添加Staging，如下图。

2.修改Staging值，如下图

$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME)改为$(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)复制代码

3.添加User-Defined Setting，并赋值对应的key，如下图。

此处，如果key没记住，可在电脑根目录下输入以下命令,查找appcenter账号下的所有app。然后查找你的项目对应的app的key。将下面的命令行中的换成自己的名字。

code-push app listcode-push deployment ls 
    
      -k复制代码

以下是我的操作截图。我用的是RNTest_commpanyTest。

4.info.plist文件CodePushDeploymentKey值修改

打包测试

修改App.js。点击按钮判断是否有更新。

/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */import React, {Component} from 'react';import {Platform, StyleSheet, Text, View, TouchableOpacity} from 'react-native';import codePush from "react-native-code-push";const instructions = Platform.select({  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',  android:    'Double tap R on your keyboard to reload,\n' +    'Shake or press menu button for dev menu',});type Props = {};let codePushOptions = { checkFrequency: codePush.CheckFrequency.MANUAL };export default class App extends Component
    
      {	onButtonPress() {        codePush.sync( {          //安装模式          //ON_NEXT_RESUME 下次恢复到前台时          //ON_NEXT_RESTART 下一次重启时          //IMMEDIATE 马上更新          installMode : codePush.InstallMode.IMMEDIATE ,          //对话框          updateDialog : {            //是否显示更新描述            appendReleaseDescription : true ,            //更新描述的前缀。 默认为"Description"            descriptionPrefix : "更新内容：" ,            //强制更新按钮文字，默认为continue            mandatoryContinueButtonLabel : "立即更新" ,            //强制更新时的信息. 默认为"An update is available that must be installed."            mandatoryUpdateMessage : "必须更新后才能使用" ,            //非强制更新时，按钮文字,默认为"ignore"            optionalIgnoreButtonLabel : '稍后' ,            //非强制更新时，确认按钮文字. 默认为"Install"            optionalInstallButtonLabel : '后台更新' ,            //非强制更新时，检查到更新的消息文本            optionalUpdateMessage : '有新版本了，是否更新？' ,            //Alert窗口的标题            title : '更新提示'          } ,        } ,    );    }  render() {    return (            
                     
                          
       
        检查更新
                       
                  
             )  }}const styles = StyleSheet.create({  container: {    fontSize: 30,    fontWeight: 'bold',    color: 'red',  },});复制代码

scheme选择

选择scheme后，真机运行。然后断开手机和Xcode连接。

版本号需要是三位，比如1.0.0

scheme选debug，打包及效果

修改App.js里面的东西。任一明显的都可以。这里我修改的是文字。将检查更新改成我是线上第一版。

打包。RNTest_commpanyTest为你的名字。ios为ios。安卓暂未试。1.0.0是xcode的版本号。"这是第一个更新包"是提示更新时的内容。

code-push release-react RNTest_commpanyTest ios --t 1.0.0 --dev false --des "我是1.0.0第一版" -m true复制代码

3. 查看历史包，确认自己是否打包成功。忽视我前两个。

code-push deployment history RNTest_commpanyTest Staging复制代码

4. 查看效果（确保与Xcode断开连接）

上面会有loading时的黑色的框。这在release的时候会消失。

scheme选release，打包及效果

本地App.js改回“检查更新字样”，然后选release，build真机。断开连接。

修改App.js中的文字为“我是release的1.0.0的第一个版本”。打包。RNTest_commpanyTest为你的名字。ios为ios。安卓暂未试。1.0.0是xcode的版本号。"这是第一个更新包"是提示更新时的内容。

code-push release-react RNTest_commpanyTest ios --t 1.0.0 --dev false --des "我是release的1.0.0的第一个版本" -m true --d Production复制代码

查看历史包，确认自己是否打包成功。忽视我前两个。

code-push deployment history RNTest_commpanyTest Production复制代码

查看效果（确保与Xcode断开连接）。迟迟等不到第一个包的下载提示，我又打了一个包。

效果展示整理完了，这里不仅可以换文字，样式和图片等也可以直接打包并提示更新下载到app端。有写的不对的，还请多多指教~~

目前我还在研究RN中，下一篇内容暂定，有一起学习的小伙伴可以交流互关呀~~~