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 list
code-push deployment ls <appName> -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<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選擇

選擇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
複製程式碼

3. 檢視歷史包，確認自己是否打包成功。忽視我前兩個。

code-push deployment history RNTest_commpanyTest Staging
複製程式碼

4. 檢視效果（確保與Xcode斷開連線）

上面會有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斷開連線）。遲遲等不到第一個包的下載提示，我又打了一個包。

效果展示整理完了，這裡不僅可以換文字，樣式和圖片等也可以直接打包並提示更新下載到app端。有寫的不對的，還請多多指教~~

目前我還在研究RN中，下一篇內容暫定，有一起學習的小夥伴可以交流互關呀~~~