RN学习（三）——CodePush打包及效果展示

Xcode配置CodePush的key

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

image

2.修改Staging值，如下图

image

$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME)
改为
$(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)

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

image image

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

code-push app list
code-push deployment ls <appName> -k

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

image

4.info.plist文件CodePushDeploymentKey值修改

image

打包测试

修改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<Props> {
    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 (
            <View style={{   
            flex:1, 
              alignItems: 'center',
              justifyContent: 'center',
            }}>
                <TouchableOpacity onPress={this.onButtonPress} style={styles.container}>
                    <Text>检查更新</Text>
                </TouchableOpacity>
            </View>
        )
  }
}

const styles = StyleSheet.create({
  container: {
    fontSize: 30,
    fontWeight: 'bold',
    color: 'red',
  },
});

scheme选择

image image

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

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

scheme选debug，打包及效果

1. 修改App.js里面的东西。任一明显的都可以。这里我修改的是文字。将检查更新改成我是线上第一版。
2. 打包。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

image

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

code-push deployment history RNTest_commpanyTest Staging

image

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

image

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

scheme选release，打包及效果

1. 本地App.js改回“检查更新字样”，然后选release，build真机。断开连接。
2. 修改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

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

code-push deployment history RNTest_commpanyTest Production

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

image
image

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

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