1. 安裝 CodePush CLI
npm install -g code-push-cli
2. 注冊 CodePush
賬號
code-push register
?? 這里會彈出一個網(wǎng)頁選擇
github
授權(quán), 注冊成功后會得到一個key
, 將key
復(fù)制到終端回車
3. 添加 ios
平臺應(yīng)用
code-push app add rebooking-ios ios react-native
得到下面的兩個 key
, 后面會用到
屏幕快照 2019-04-24 上午10.09.27.png
4. 添加 android
平臺應(yīng)用
code-push app add rebooking-android android react-native
得到的東西和 ios 一樣
進(jìn)入 https://appcenter.ms/ 可以看到你剛才創(chuàng)建的app, 如下圖
屏幕快照 2019-04-24 上午10.15.11.png
下面開始整合到 react-native
5. react-native
中安裝 code-push
組件
npm install react-native-code-push --save
6. 添加原生依賴, 使用 link
到 android
和 ios
中
react-native link react-native-code-push
如果
link
的時候出現(xiàn)rnpm-install ERR! ERRPACKAGEJSON No package found. Are you sure this i a React Native project? Package name not found in ...
等, 請使用新版本的react-native
版本react-native init MyApp --version 0.59.5
我這里使用 59
運行react-native link的時候,命令行會提示輸入部署碼What is your CodePush deployment key for Android (hit <ENTER> to ignore)
這個時候?qū)⒛?code>Android 中 Production
的 Deployment Key
粘貼回程。 ios
同理。
7. 將 Android
和 ios
的版本號改為 1.0.0
Android 版本號修改.png
IOS 版本號修改.png.png
8. 在react-native
項目中的首頁中 使用 code-push
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} 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',
});
export default class App extends Component {
componentDidMount(){
CodePush.sync({
//安裝模式
//ON_NEXT_RESUME 下次恢復(fù)到前臺時
//ON_NEXT_RESTART 下一次重啟時
//IMMEDIATE 馬上更新
installMode : CodePush.InstallMode.IMMEDIATE ,
//對話框
updateDialog : {
//是否顯示更新描述
appendReleaseDescription : true ,
//更新描述的前綴。 默認(rèn)為"Description"
descriptionPrefix : "更新內(nèi)容:" ,
//強制更新按鈕文字,默認(rèn)為continue
mandatoryContinueButtonLabel : "立即更新" ,
//強制更新時的信息. 默認(rèn)為"An update is available that must be installed."
mandatoryUpdateMessage : "必須更新后才能使用" ,
//非強制更新時,按鈕文字,默認(rèn)為"ignore"
optionalIgnoreButtonLabel : '稍后' ,
//非強制更新時,確認(rèn)按鈕文字. 默認(rèn)為"Install"
optionalInstallButtonLabel : '后臺更新' ,
//非強制更新時,檢查到更新的消息文本
optionalUpdateMessage : '有新版本了,是否更新?' ,
//Alert窗口的標(biāo)題
title : '更新提示'
}
}
);
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
);
}
}
9. 發(fā)布更新
code-push release-react rebooking-ios ios -d Production
code-push release-react rebooking-android android -d Production
最后打開手機查看效果
屏幕快照 2019-04-24 上午10.42.10.png
關(guān)于自定義更新彈框 ,參照下面的文章
image.png