Skip to content

Commit 347638f

Browse files
TrustDecTrustDec
committed
add hot update state and 优化性能 and 删除页面更新进度
1 parent 7518179 commit 347638f

File tree

14 files changed

+155
-32
lines changed

14 files changed

+155
-32
lines changed

‎src/icons/sad.png

3.73 KB
Loading

‎src/icons/sad@2x.png

4.9 KB
Loading

‎src/icons/sad@3x.png

5.84 KB
Loading

‎src/icons/smile.png

3.74 KB
Loading

‎src/icons/smile@2x.png

4.91 KB
Loading

‎src/icons/smile@3x.png

5.89 KB
Loading

‎src/modules/PopupDialog.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ PopupDialog.defaultProps = {
6565
cancelBtn: null,
6666
overlayOpacity: 0.7,
6767
overlayBackgroundColor: '#000',
68-
dialogStyle: { overflow: 'hidden',backgroundColor:'rgba(0,0,0,.3)' }
68+
dialogStyle: { overflow: 'hidden', backgroundColor: 'rgba(0,0,0,.3)' }
6969
};
7070
const styles = StyleSheet.create({
7171
container: {

‎src/page/DialogModules/Update.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React, { Component } from 'react';
2+
import { View, Text, Image, StyleSheet, ActivityIndicator } from 'react-native';
3+
import * as imagesFile from '../../utils/images';
4+
const activityIndicator = <ActivityIndicator animating={true} size="large" color={'#fff'} />;
5+
export const UpdateDialog = props => {
6+
console.log(props);
7+
return (
8+
<View style={styles.centering}>
9+
{activityIndicator}
10+
<Text style={styles.loginStateTitle}>{props.title}</Text>
11+
</View>
12+
);
13+
};
14+
export const UpToDateDialog = props => {
15+
return (
16+
<View style={styles.centering}>
17+
<Image style={{ tintColor: '#fff', width: 36, height: 36 }} source={imagesFile.SAD} />
18+
<Text style={styles.loginStateTitle}>{props.title}</Text>
19+
</View>
20+
);
21+
};
22+
export const UpdateScheduleDialog = props => {
23+
return (
24+
<View style={styles.centering}>
25+
{activityIndicator}
26+
<Text style={styles.loginStateTitle}>{props.schedule}%</Text>
27+
</View>
28+
);
29+
};
30+
31+
const styles = StyleSheet.create({
32+
centering: {
33+
flex: 1,
34+
alignItems: 'center',
35+
justifyContent: 'center'
36+
},
37+
loginStateTitle: {
38+
textAlign: 'center',
39+
fontSize: 16,
40+
marginTop: 5,
41+
color: '#fff'
42+
}
43+
});

‎src/page/Login/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ class LoginScreen extends Component<Props, State> {
5353
this.props.navigation.dispatch(resetAction);
5454
LayoutAnimation.linear();
5555
});
56-
}, 2000);
56+
}, 1500);
5757
};
5858
render() {
5959
return (

‎src/page/Root.js

Lines changed: 56 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
StatusBar,
1616
ActivityIndicator,
1717
ScrollView,
18+
InteractionManager,
1819
LayoutAnimation
1920
} from 'react-native';
2021
import * as dialogType from '../redux/actions/dialogType';
@@ -23,8 +24,7 @@ import * as actionCreators from '../redux/actions/loginActions';
2324
import CodePush from 'react-native-code-push';
2425
import Modal from 'react-native-modalbox';
2526
import * as CONFIG from '../equipment/ComponentUtil';
26-
import { ListRow, Toast } from 'teaset';
27-
import ToastView from '../equipment/ToastUtil';
27+
import { ListRow } from 'teaset';
2828
import PopupDialog from '../modules/PopupDialog';
2929
import MaskedView from '../modules/MaskedView';
3030
let components = [Text, TextInput];
@@ -43,7 +43,7 @@ components.map((item, index) => {
4343
};
4444
item.prototype.render = function render() {
4545
let oldProps = this.props;
46-
this.props = { ...this.props, ...customProps, style: [this.props.style] };
46+
this.props = { ...this.props, ...customProps, style: [customProps.style, this.props.style] };
4747
try {
4848
return TextRender.apply(this, arguments);
4949
} finally {
@@ -133,36 +133,61 @@ class LoginScreenView extends Component {
133133
this.props.showDialog(diaOptin);
134134
};
135135
onCheckForUpdate = () => {
136-
ToastView.showCustom('检测更新');
136+
this.props.showDialog(dialogType.UPDATE_DIALOG);
137137
CodePush.checkForUpdate(CONFIG.CODEPUS_KEY)
138138
.then(update => {
139-
ToastView.hideCustom();
140139
if (!update) {
141-
Toast.smile('暂无更新', 1500);
140+
InteractionManager.runAfterInteractions(() => {
141+
this.props.showDialog(dialogType.UP_TO_DATE);
142+
setTimeout(() => {
143+
this.props.hideDialog();
144+
}, 1000);
145+
});
142146
} else {
143-
Alert.alert('有可用更新' + update.label, update.description, [
144-
{ text: '取消', onPress: () => console.log('Cancel Pressed'), style: 'destructive' },
145-
{
146-
text: '更新',
147-
onPress: () => {
148-
update
149-
.download(mess => {
150-
let receivedBytes = (mess.receivedBytes / 1024).toFixed(3);
151-
let totalBytes = (mess.totalBytes / 1024).toFixed(3);
152-
let per = parseInt(receivedBytes / totalBytes * 100);
153-
this.setState({ per });
154-
})
155-
.then(LocalPackage => {
156-
LocalPackage.install(CodePush.InstallMode.IMMEDIATE, 0);
157-
});
147+
//this.props.showDialog(dialogType.AWAITING_USER_ACTION);
148+
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+
//this.props.downSchedule(per);
169+
})
170+
.then(LocalPackage => {
171+
InteractionManager.runAfterInteractions(() => {
172+
this.props.showDialog(dialogType.UPDATE_INSTALLED);
173+
setTimeout(() => {
174+
LocalPackage.install(CodePush.InstallMode.IMMEDIATE, 0);
175+
},500);
176+
});
177+
});
178+
}
158179
}
159-
}
160-
]);
180+
]);
181+
});
161182
}
162183
})
163184
.catch(error => {
164-
ToastView.hideCustom();
165-
Toast.sad('更新失败', 1500);
185+
InteractionManager.runAfterInteractions(() => {
186+
this.props.showDialog(dialogType.UNKNOWN_ERROR);
187+
setTimeout(() => {
188+
this.props.hideDialog();
189+
}, 1000);
190+
});
166191
});
167192
};
168193
render() {
@@ -179,7 +204,6 @@ class LoginScreenView extends Component {
179204
titlePlace="top"
180205
detailStyle={[styles.counterTextRed, this.props.state.theme.styles.navFont]}
181206
/>
182-
<ListRow title="更新进度:" detail={this.state.per} />
183207
<ListRow title="isLoggedIn:" detail={this.props.state.login.isLoggedIn + ''} />
184208
<ListRow title="status:" detail={this.props.state.login.status + ''} />
185209
<ListRow
@@ -213,7 +237,7 @@ class LoginScreenView extends Component {
213237
);
214238
}}
215239
title={'SyanImagePicker'}
216-
bgColor="#188eee"
240+
bgColor="#5ACBC8"
217241
/>
218242
</View>
219243

@@ -261,16 +285,18 @@ const mapStateToProps = state => {
261285
isLoggedIn: state.login.isLoggedIn,
262286
status: state.login.status,
263287
state: state,
264-
theme: state.theme
288+
theme: state.theme,
289+
schedule: state.schedule
265290
};
266291
};
267292
const mapDispatchToProps = (dispatch, ownProps) => {
268293
return {
269294
actions: bindActionCreators(actionCreators, dispatch),
270-
showDialog: option => dispatch(option),
295+
showDialog: DIALOG => dispatch(DIALOG),
271296
hideDialog: () => dispatch(dialogType.HIDE_DIALOG),
272297
setTheme: () => dispatch({ type: 'DARK_THEME' }),
273-
setDefaultTheme: () => dispatch({ type: 'DEFAULT_THEME' })
298+
setDefaultTheme: () => dispatch({ type: 'DEFAULT_THEME' }),
299+
downSchedule: schedule => dispatch({ type: 'STARE_DOWNLOADING', schedule: schedule })
274300
};
275301
};
276302
export default connect(mapStateToProps, mapDispatchToProps)(LoginScreenView);

‎src/redux/actions/dialogType.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,49 @@
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';
45
import { DialogTitle } from 'react-native-popup-dialog';
56

67
export const SHOW_DIALOG = { type: 'SHOW_DIALOG' };
78
export const HIDE_DIALOG = { type: 'HIDE_DIALOG' };
89

10+
const PUBLIC_DIALOG = {
11+
...SHOW_DIALOG,
12+
width: 100,
13+
height: 100,
14+
overlayOpacity: 0,
15+
dialogStyle: { backgroundColor: 'rgba(0, 0, 0, .7)' }
16+
};
17+
18+
export const UPDATE_DIALOG = {
19+
...PUBLIC_DIALOG,
20+
children: <UpdateDialog title={'正在检测'} />
21+
};
22+
export const UP_TO_DATE = {
23+
...PUBLIC_DIALOG,
24+
children: <UpToDateDialog title={'暂无更新'} />
25+
};
26+
export const UNKNOWN_ERROR = {
27+
...PUBLIC_DIALOG,
28+
children: <UpdateDialog title={'连接异常'} />
29+
};
30+
export const AWAITING_USER_ACTION = {
31+
...PUBLIC_DIALOG,
32+
children: <UpdateDialog title={'等待操作'} />
33+
};
34+
export const UPDATE_INSTALLED = {
35+
...PUBLIC_DIALOG,
36+
children: <UpdateDialog title={'安装并重启'} />
37+
};
38+
export const UPDATE_IGNORED = {
39+
...PUBLIC_DIALOG,
40+
children: <UpdateDialog title={'取消更新'} />
41+
};
42+
export const DOWNLOADING_PACKAGE = schedule => ({
43+
...PUBLIC_DIALOG,
44+
schedule,
45+
children: <UpdateScheduleDialog title={'正在下载更新包'} schedule={schedule} />
46+
});
947
export const LOGIN_DIALOG = {
1048
...SHOW_DIALOG,
1149
width: 100,

‎src/redux/reducers/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import visibilityFilter from './visibilityFilter';
66
import login from './login';
77
import dialog from './dialog';
88
import theme from './theme';
9+
import schedule from './schedule';
910

1011
const AppReducer = combineReducers({
1112
nav,
@@ -14,6 +15,7 @@ const AppReducer = combineReducers({
1415
visibilityFilter,
1516
login,
1617
dialog,
18+
schedule,
1719
theme
1820
});
1921
export default AppReducer;

‎src/redux/reducers/schedule.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const defaultSchedule = {
2+
schedule: 0
3+
};
4+
export default (schedule = (state = defaultSchedule, action) => {
5+
switch (action.type) {
6+
case 'STARE_DOWNLOADING':
7+
return { schedule: action.schedule, ...action };
8+
default:
9+
return state;
10+
}
11+
});

‎src/utils/images.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { Image } from 'react-native';
2+
export const SAD = require('../icons/sad.png');
3+
export const SMILE = require('../icons/smile.png');

0 commit comments

Comments
 (0)