Skip to content

Commit f80e65f

Browse files
TrustDecTrustDec
committed
更新弹框，弃用Alert
1 parent 8c85a61 commit f80e65f

File tree

3 files changed

+73
-37
lines changed

3 files changed

+73
-37
lines changed

‎src/page/DialogModules/Update.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
22
import { View, Text, Image, StyleSheet, ActivityIndicator } from 'react-native';
33
import * as imagesFile from '../../utils/images';
44
const activityIndicator = <ActivityIndicator animating={true} size="large" color={'#fff'} />;
5+
56
export const UpdateDialog = props => {
67
console.log(props);
78
return (
@@ -11,6 +12,14 @@ export const UpdateDialog = props => {
1112
</View>
1213
);
1314
};
15+
export const UpdateMessDialog = props => {
16+
console.log(props.updateMess);
17+
return (
18+
<View style={styles.updateMessBox}>
19+
<Text style={styles.updateMess}>{props.updateMess.description}</Text>
20+
</View>
21+
);
22+
};
1423
export const UpToDateDialog = props => {
1524
return (
1625
<View style={styles.centering}>
@@ -34,10 +43,16 @@ const styles = StyleSheet.create({
3443
alignItems: 'center',
3544
justifyContent: 'center'
3645
},
46+
updateMessBox: {
47+
flex: 1
48+
},
3749
loginStateTitle: {
3850
textAlign: 'center',
3951
fontSize: 16,
4052
marginTop: 5,
4153
color: '#fff'
54+
},
55+
updateMess: {
56+
color: '#000'
4257
}
4358
});

‎src/page/Root.js‎

Lines changed: 41 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -88,19 +88,28 @@ class LoginScreenView extends Component {
8888
};
8989
constructor() {
9090
super();
91-
91+
this.timer = [];
9292
this._image = require('../image/twitter.png');
9393
}
9494
componentDidMount() {
9595
this.resetAnimation();
9696
}
97+
componentWillUnmount() {
98+
this.onClearTimer();
99+
}
100+
onClearTimer = () => {
101+
this.timer &&
102+
this.timer.map((item, index) => {
103+
item && clearTimeout(item);
104+
});
105+
};
97106
resetAnimation() {
98107
this.setState({
99108
appReady: false,
100109
rootKey: Math.random()
101110
});
102111

103-
setTimeout(() => {
112+
this.timer[0] = setTimeout(() => {
104113
this.setState({
105114
appReady: true
106115
});
@@ -133,57 +142,53 @@ class LoginScreenView extends Component {
133142
this.props.showDialog(diaOptin);
134143
};
135144
onCheckForUpdate = () => {
145+
this.onClearTimer();
136146
this.props.showDialog(dialogType.UPDATE_DIALOG);
137147
CodePush.checkForUpdate(CONFIG.CODEPUS_KEY)
138148
.then(update => {
139149
if (!update) {
140150
InteractionManager.runAfterInteractions(() => {
141151
this.props.showDialog(dialogType.UP_TO_DATE);
142-
setTimeout(() => {
152+
this.timer[1] = setTimeout(() => {
143153
this.props.hideDialog();
144154
}, 1000);
145155
});
146156
} else {
147-
//this.props.showDialog(dialogType.AWAITING_USER_ACTION);
157+
//InteractionManager.runAfterInteractions(() => {
158+
this.props.showDialog(dialogType.GUODU_DIALOG);
159+
// });
148160
InteractionManager.runAfterInteractions(() => {
149-
Alert.alert('有可用更新' + update.label, update.description, [
150-
{
151-
text: '取消',
152-
onPress: () => {
153-
this.props.showDialog(dialogType.UPDATE_IGNORED);
154-
setTimeout(() => {
155-
this.props.hideDialog();
156-
}, 500);
157-
}
158-
},
159-
{
160-
text: '更新',
161-
onPress: () => {
162-
update
163-
.download(mess => {
164-
let receivedBytes = (mess.receivedBytes / 1024).toFixed(3);
165-
let totalBytes = (mess.totalBytes / 1024).toFixed(3);
166-
let per = parseInt(receivedBytes / totalBytes * 100);
167-
this.props.showDialog(dialogType.DOWNLOADING_PACKAGE(per));
168-
})
169-
.then(LocalPackage => {
170-
InteractionManager.runAfterInteractions(() => {
171-
this.props.showDialog(dialogType.UPDATE_INSTALLED);
172-
setTimeout(() => {
173-
LocalPackage.install(CodePush.InstallMode.IMMEDIATE, 0);
174-
}, 500);
175-
});
176-
});
177-
}
178-
}
179-
]);
161+
update.cancelBtn = () => {
162+
this.props.showDialog(dialogType.UPDATE_IGNORED);
163+
this.timer[3] = setTimeout(() => {
164+
this.props.hideDialog();
165+
}, 500);
166+
};
167+
update.confirmBtn = () => {
168+
update
169+
.download(mess => {
170+
let receivedBytes = (mess.receivedBytes / 1024).toFixed(3);
171+
let totalBytes = (mess.totalBytes / 1024).toFixed(3);
172+
let per = parseInt(receivedBytes / totalBytes * 100);
173+
this.props.showDialog(dialogType.DOWNLOADING_PACKAGE(per));
174+
})
175+
.then(LocalPackage => {
176+
InteractionManager.runAfterInteractions(() => {
177+
this.props.showDialog(dialogType.UPDATE_INSTALLED);
178+
this.timer[2] = setTimeout(() => {
179+
LocalPackage.install(CodePush.InstallMode.IMMEDIATE, 0);
180+
}, 500);
181+
});
182+
});
183+
};
184+
this.props.showDialog(dialogType.AWAITING_USER_ACTION(update));
180185
});
181186
}
182187
})
183188
.catch(error => {
184189
InteractionManager.runAfterInteractions(() => {
185190
this.props.showDialog(dialogType.UNKNOWN_ERROR);
186-
setTimeout(() => {
191+
this.timer[4] = setTimeout(() => {
187192
this.props.hideDialog();
188193
}, 500);
189194
});

‎src/redux/actions/dialogType.js‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React from 'react';
22
import ViewTest from '../../page/DialogModules/ViewTest';
33
import LoginDialog from '../../page/DialogModules/Login';
4-
import { UpdateDialog, UpdateScheduleDialog, UpToDateDialog } from '../../page/DialogModules/Update';
4+
import { UpdateDialog, UpdateScheduleDialog, UpToDateDialog, UpdateMessDialog } from '../../page/DialogModules/Update';
55
import { DialogTitle } from 'react-native-popup-dialog';
6+
const dialogTitle = props => <DialogTitle {...props} />;
67

78
export const SHOW_DIALOG = { type: 'SHOW_DIALOG' };
89
export const HIDE_DIALOG = { type: 'HIDE_DIALOG' };
@@ -23,6 +24,17 @@ export const UP_TO_DATE = {
2324
...PUBLIC_DIALOG,
2425
children: <UpToDateDialog title={'暂无更新'} />
2526
};
27+
export const AWAITING_USER_ACTION = updateMess => ({
28+
...PUBLIC_DIALOG,
29+
width: 0.9,
30+
height: 260,
31+
overlayOpacity: 0.6,
32+
dialogTitle: <DialogTitle title={`${updateMess.label}更新内容`} />,
33+
dialogStyle: { backgroundColor: '#fff' },
34+
children: <UpdateMessDialog updateMess={updateMess} />,
35+
confirmBtn: { title: '更新', bgColor: '#FF3F00', onPress: updateMess.confirmBtn },
36+
cancelBtn: { title: '取消', bgColor: '#ddd', onPress: updateMess.cancelBtn }
37+
});
2638
export const UNKNOWN_ERROR = {
2739
...PUBLIC_DIALOG,
2840
children: <UpdateDialog title={'连接异常'} />
@@ -31,6 +43,10 @@ export const UPDATE_INSTALLED = {
3143
...PUBLIC_DIALOG,
3244
children: <UpdateDialog title={'安装并重启'} />
3345
};
46+
export const GUODU_DIALOG = {
47+
...PUBLIC_DIALOG,
48+
show: false
49+
};
3450
export const UPDATE_IGNORED = {
3551
...PUBLIC_DIALOG,
3652
children: <UpdateDialog title={'取消更新'} />

0 commit comments

Comments
 (0)