插件 "rn-app-upgrade": "^2.1.8"
組件代碼：
import React, { PureComponent } from "react";
import {
? View,
? Image,
? Text,
? InteractionManager,
? ProgressViewIOS,
? ProgressBarAndroid,
? Platform,
? Modal,
? StyleSheet,
? Dimensions,
? ScrollView,
? NativeModules,
? TouchableOpacity,
? Linking,
} from "react-native";
import CodePush from "react-native-code-push";
import { Router, Scene } from "react-native-router-flux";
import {
? downloadApk,
? versionName,
? versionCode,
? openAPPStore,
? checkIOSUpdate,
? addDownLoadListener,
} from "rn-app-upgrade";
// import Loading from './view/screen/home/Loading';
import { Colors, Metrics } from "../../theme/Index";
import { Version, CodePushKey, CodePushKeyIos } from "../../config/Index";
import { Send } from "../../utils/Http";
import Toast from "../../components/Toast";
import { connect } from "react-redux";
class Update extends PureComponent {
? constructor(props) {
? ? super(props);
? ? this.state = {
? ? ? updateingText: "",
? ? ? updateModalVisible: false,
? ? ? updateInfo: {},
? ? ? updateProgressBarVisible: false,
? ? ? noticeModalVisible: true,
? ? };
? }
? componentDidMount() {
? ? InteractionManager.runAfterInteractions(() => {
? ? ? // CodePush.notifyAppReady();
? ? ? this.fetchVersion();
? ? });
? }
? /**
? ?* 獲取線上版本
? ?*/
? fetchVersion() {
? ? if (this.props.hiddenUpdateModal == true) {
? ? ? console.log("用戶啟動(dòng)時(shí)點(diǎn)擊了不更新跳過更新檢查");
? ? ? return;
? ? }
? ? let systemName = Platform.OS.toLowerCase();
? ? Send(`api/v1/version`, "get")
? ? ? .then((res) => {
? ? ? ? console.log("檢查版本返回:");
? ? ? ? console.log(res);
? ? ? ? if (res.status == "Success") {
? ? ? ? ? this.checkUpdateApp(res.data); //{ currentVersion: '1.0.0', downloadUrl: 'http://app-1251750492.file.myqcloud.com/prod/x7game2.0.7.apk', updateContent: '118創(chuàng)富助手 喜普大奔 今日上線公測! 1.0.1' }
? ? ? ? }
? ? ? })
? ? ? .catch((res) => {
? ? ? ? Toast.tip("檢查版本失敗");
? ? ? ? console.log("檢查版本失敗");
? ? ? });
? ? // this.checkUpdateApp(testData); //
? }
? parseVersion(version) {
? ? if (version == null || version == "") return 0;
? ? var arr = version.split(".");
? ? if (arr == null || arr.length != 3) return 0;
? ? return parseInt(arr[0]) * 100 + parseInt(arr[1]) * 10 + parseInt(arr[2]);
? }
? /**
? ?* 線上版本獲取
? ?*/
? checkUpdateApp(updateInfo) {
? ? // 后端自己做了判斷
? ? if (updateInfo.upgrade == false) {
? ? ? console.log("后端返回不需要更新");
? ? ? return;
? ? }
? ? let currentVersion = this.parseVersion(updateInfo.data.version);
? ? if (currentVersion == 0) {
? ? ? Toast.tip("服務(wù)器無版本信息");
? ? ? return;
? ? }
? ? // this.props.updateVersion(currentVersion, true);
? ? if (this.parseVersion(Version) >= currentVersion) {
? ? ? console.log("不需要更新");
? ? ? return;
? ? }
? ? console.log("準(zhǔn)備更新");
? ? this.setState({ updateInfo }, () => {
? ? ? this.setState({ updateModalVisible: true });
? ? ? /*
? ? ? if (isHotReload) {
? ? ? ? // 熱更新強(qiáng)制彈框
? ? ? ? if (isSilent) {
? ? ? ? ? // 靜默更新
? ? ? ? ? this.hotReload(CodePush.InstallMode.IMMEDIATE);
? ? ? ? } else {
? ? ? ? ? this.setState({ updateModalVisible: true });
? ? ? ? }
? ? ? } else {
? ? ? ? if (Platform.OS === "ios") {
? ? ? ? ? // IOS升級(jí)ipa
? ? ? ? ? this.setState({ updateModalVisible: true });
? ? ? ? } else {
? ? ? ? ? this.setState({ updateModalVisible: true });
? ? ? ? }
? ? ? }*/
? ? });
? }
? /**
? ?* 熱更新更新流程
? ?* @param {*} mode
? ?*/
? hotReload(mode) {
? ? if (!this.state.updateProgressBarVisible) this.setState({ updateProgressBarVisible: true });
? ? CodePush.sync(
? ? ? {
? ? ? ? installMode: CodePush.InstallMode.IMMEDIATE,
? ? ? ? mandatoryInstallMode: mode,
? ? ? ? deploymentKey: Platform.OS === "ios" ? CodePushKeyIos : CodePushKey,
? ? ? ? updateDialog: false,
? ? ? },
? ? ? (status) => {
? ? ? ? console.log("code-push status" + status);
? ? ? ? if ([0, 2, 3, 8].indexOf(status) !== -1) this.setState({ updateModalVisible: false });
? ? ? },
? ? ? (process) => {
? ? ? ? let { totalBytes, receivedBytes } = process;
? ? ? ? console.log("code-push process-->" + totalBytes + " / " + receivedBytes);
? ? ? },
? ? ? (update) => {
? ? ? ? console.log("code-push update" + update);
? ? ? }
? ? );
? }
? /**
? ?* 應(yīng)用商店更新流程
? ?*/
? downloadApp() {
? ? let updateInfo = this.state.updateInfo;
? ? this.setState({ updateingText: "" });
? ? let that = this;
? ? console.log("開始更新:" + updateInfo.data.path);
? ? if (Platform.OS === "ios") {
? ? ? // var IPAInstall = NativeModules.IPAInstall2;
? ? ? // IPAInstall.itms_install(updateInfo['data.path']);
? ? ? Linking.openURL(updateInfo.data.path);
? ? } else {
? ? ? // upgrade(updateInfo.data.path);
? ? ? // Linking.openURL(updateInfo.data.path);
? ? ? downloadApk({
? ? ? ? interval: 666, // listen to upload progress event, emit every 666ms
? ? ? ? apkUrl: updateInfo.data.path,
? ? ? ? downloadInstall: true,
? ? ? ? callback: {
? ? ? ? ? onProgress: (received, total, percent) => {
? ? ? ? ? ? let txt = percent + "% (" + received + "/" + total + ")";
? ? ? ? ? ? //console.log(txt);
? ? ? ? ? ? this.setState({ updateingText: txt });
? ? ? ? ? },
? ? ? ? ? onFailure: (errorMessage, statusCode) => {
? ? ? ? ? ? console.log("更新失敗");
? ? ? ? ? ? this.setState({ updateingText: "更新失敗" });
? ? ? ? ? },
? ? ? ? ? onComplete: () => {
? ? ? ? ? ? console.log("完成");
? ? ? ? ? ? this.setState({ updateingText: "下載完成" });
? ? ? ? ? },
? ? ? ? },
? ? ? });
? ? }
? ? if (!this.state.updateProgressBarVisible) this.setState({ updateProgressBarVisible: true });
? }
? /**
? ?* 渲染更新Bar
? ?*/
? renderAppUpdateBar() {
? ? return (
? ? ? <View style={styles.updateFooter}>
? ? ? ? <TouchableOpacity onPress={() => this.downloadApp()}>
? ? ? ? ? <View style={styles.updateFooterBtn}>
? ? ? ? ? ? <Text style={styles.updateText}>立即更新</Text>
? ? ? ? ? </View>
? ? ? ? </TouchableOpacity>
? ? ? ? <TouchableOpacity
? ? ? ? ? onPress={() => {
? ? ? ? ? ? this.setState({ updateModalVisible: false });
? ? ? ? ? ? this.props.sethiddenUpdateModal();
? ? ? ? ? }}>
? ? ? ? ? <View style={styles.updateFooterBtn}>
? ? ? ? ? ? <Text style={styles.updateText}>暫不更新</Text>
? ? ? ? ? </View>
? ? ? ? </TouchableOpacity>
? ? ? </View>
? ? ? // </TouchableOpacity>
? ? );
? }
? /**
? ?* 熱更新進(jìn)度條
? ?*/
? renderAppUpdateProgress = () => {
? ? let progressValue = 0;
? ? return (
? ? ? <View
? ? ? ? style={{
? ? ? ? ? width: Metrics.screenWidth * 0.55,
? ? ? ? ? paddingTop: 10,
? ? ? ? ? paddingBottom: Platform.OS === "ios" ? 35 : 20,
? ? ? ? }}>
? ? ? ? {Platform.OS === "ios" ? (
? ? ? ? ? <ProgressViewIOS
? ? ? ? ? ? progressTintColor={Colors.C6}
? ? ? ? ? ? trackTintColor={Colors.C6}
? ? ? ? ? ? progress={progressValue}
? ? ? ? ? />
? ? ? ? ) : (
? ? ? ? ? <ProgressBarAndroid
? ? ? ? ? ? animating
? ? ? ? ? ? styleAttr="Horizontal"
? ? ? ? ? ? color={Colors.C6}
? ? ? ? ? ? progress={progressValue}
? ? ? ? ? />
? ? ? ? )}
? ? ? </View>
? ? );
? };
? /**
? ?* 系統(tǒng)更新提示框
? ?*/
? renderUpdateModal() {
? ? return (
? ? ? <Modal transparent visible={this.state.updateModalVisible} onRequestClose={() => {}}>
? ? ? ? <View style={styles.updateContainer}>
? ? ? ? ? <View
? ? ? ? ? ? style={[
? ? ? ? ? ? ? styles.updateContainer,
? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? position: "absolute",
? ? ? ? ? ? ? ? left: 0,
? ? ? ? ? ? ? ? right: 0,
? ? ? ? ? ? ? ? top: 0,
? ? ? ? ? ? ? ? bottom: 0,
? ? ? ? ? ? ? ? backgroundColor: "black",
? ? ? ? ? ? ? ? opacity: 0.5,
? ? ? ? ? ? ? },
? ? ? ? ? ? ]}
? ? ? ? ? />
? ? ? ? ? <View style={styles.updateHeader}>
? ? ? ? ? ? <Image
? ? ? ? ? ? ? source={require("../../image/login/log.png")}
? ? ? ? ? ? ? resizeMode="contain"
? ? ? ? ? ? ? style={{
? ? ? ? ? ? ? ? width: Metrics.screenWidth * 0.45,
? ? ? ? ? ? ? ? height: Metrics.screenWidth * 0.45 * 0.454,
? ? ? ? ? ? ? ? marginTop: 15,
? ? ? ? ? ? ? }}
? ? ? ? ? ? />
? ? ? ? ? ? <View style={{ paddingLeft: 20, paddingRight: 20 }}>
? ? ? ? ? ? ? {this.state.updateProgressBarVisible ? (
? ? ? ? ? ? ? ? <Text style={[styles.updateVersion, { fontSize: 13 }]}>
? ? ? ? ? ? ? ? ? 正在更新:{this.state.updateingText}
? ? ? ? ? ? ? ? </Text>
? ? ? ? ? ? ? ) : (
? ? ? ? ? ? ? ? <Text style={styles.updateVersion}>
? ? ? ? ? ? ? ? ? {this.state.updateInfo == null || this.state.updateInfo.data == null
? ? ? ? ? ? ? ? ? ? ? ""
? ? ? ? ? ? ? ? ? ? : `發(fā)現(xiàn)新版本${this.state.updateInfo.data.version}`}
? ? ? ? ? ? ? ? </Text>
? ? ? ? ? ? ? )}
? ? ? ? ? ? ? {/* <Text style={styles.updateContent}>{this.state.updateInfo["updateContent"]}</Text> */}
? ? ? ? ? ? ? {this.state.updateProgressBarVisible
? ? ? ? ? ? ? ? ? this.renderAppUpdateProgress()
? ? ? ? ? ? ? ? : this.renderAppUpdateBar()}
? ? ? ? ? ? </View>
? ? ? ? ? </View>
? ? ? ? </View>
? ? ? </Modal>
? ? );
? }
? render() {
? ? return this.renderUpdateModal();
? }
}
const styles = StyleSheet.create({
? container: { flex: 1, backgroundColor: "#FFFFFF" },
? updateContainer: { flex: 1, justifyContent: "center", alignItems: "center" },
? updateHeader: {
? ? width: Metrics.screenWidth * 0.75,
? ? backgroundColor: "#FFFFFF",
? ? borderRadius: 10,
? ? alignItems: "center",
? },
? updateVersion: { fontSize: 17, textAlign: "center", marginTop: 20 },
? updateContent: { fontSize: 14, paddingTop: 15 },
? updateFooter: {
? ? flexDirection: "row",
? ? justifyContent: "center",
? ? alignItems: "center",
? ? alignSelf: "center",
? },
? updateFooterBtn: {
? ? marginTop: 15,
? ? marginBottom: 15,
? ? flexDirection: "row",
? ? justifyContent: "center",
? ? alignItems: "center",
? ? alignSelf: "center",
? ? height: 38,
? ? width: Metrics.screenWidth * 0.28,
? ? backgroundColor: "#0E96A4",
? ? borderRadius: 17,
? ? marginHorizontal: 5,
? },
? updateText: { fontSize: 14, color: "#FFFFFF" },
});
// export default Update;
const mapStateToProps = (state) => ({
? hiddenUpdateModal: state.Home.hiddenUpdateModal,
});
const mapDispatchToProps = (dispatch) => ({
? sethiddenUpdateModal: () =>
? ? dispatch({
? ? ? type: "Home/setFormData",
? ? ? payload: { name: "hiddenUpdateModal", value: true },
? ? }),
});
export default connect(mapStateToProps, mapDispatchToProps)(Update);
