Skip to content

Commit cc06a76

Browse files
CodeXYuCodeXYu
committed
1. 福利页重构结束
1 parent cbb3528 commit cc06a76

File tree

3 files changed

+73
-114
lines changed

3 files changed

+73
-114
lines changed

‎app/index.js‎

Lines changed: 26 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* Created by Rabbit on 2018/4/12.
44
*/
55

6-
import React from 'react';
6+
import React, { useEffect } from 'react';
77
import { View, ActivityIndicator, DeviceEventEmitter, BackHandler, ToastAndroid } from 'react-native';
88

99
import { AuthLoadingRouter } from './routers/AuthLoading';
@@ -16,8 +16,27 @@ import SplashScreen from 'react-native-splash-screen';
1616
import { StoreContext } from './utils/Tool';
1717

1818
const navigationPersistenceKey = __DEV__ ? 'NavigationStateDEV' : null;
19+
let lastBackPressed: number;
1920

2021
function index() {
22+
useEffect(() => {
23+
SplashScreen.hide();
24+
DeviceEventEmitter.emit('badgeNumber', 30);
25+
return () => {
26+
BackHandler.removeEventListener('hardwareBackPress', this.onBackButtonPressAndroid);
27+
};
28+
});
29+
30+
function onBackButtonPressAndroid() {
31+
if (lastBackPressed && lastBackPressed + 2000 >= Date.now()) {
32+
// 最近2秒内按过back键，可以退出应用。
33+
return false;
34+
}
35+
lastBackPressed = Date.now();
36+
ToastAndroid.show('再按一次退出应用', ToastAndroid.SHORT);
37+
return true;
38+
}
39+
2140
return (
2241
<StoreContext.Provider value={rootStore}>
2342
<View
@@ -30,71 +49,17 @@ function index() {
3049
// persistenceKey={navigationPersistenceKey}
3150
renderLoadingExperimental={() => <ActivityIndicator size="large" color="black" />}
3251
onNavigationStateChange={(prevState, currentState) => {
33-
// const AppRouter = currentState.routes[1];
34-
// if (AppRouter.routes && AppRouter.routes.length > 1) {
35-
// BackHandler.removeEventListener('hardwareBackPress', this.onBackButtonPressAndroid);
36-
// } else {
37-
// BackHandler.addEventListener('hardwareBackPress', this.onBackButtonPressAndroid);
38-
// }
52+
const AppRouter = currentState.routes[1];
53+
if (AppRouter.routes && AppRouter.routes.length > 1) {
54+
BackHandler.removeEventListener('hardwareBackPress', onBackButtonPressAndroid);
55+
} else {
56+
BackHandler.addEventListener('hardwareBackPress', onBackButtonPressAndroid);
57+
}
3958
}}
4059
/>
41-
<Toast ref={(t: any) => (this.toast = t)} />
4260
</View>
4361
</StoreContext.Provider>
4462
);
4563
}
4664

4765
export default index;
48-
49-
class index1 extends React.Component<any> {
50-
toast: Toast;
51-
52-
constructor(props: any) {
53-
super(props);
54-
}
55-
componentDidMount() {
56-
global.Toast = this.toast;
57-
SplashScreen.hide();
58-
DeviceEventEmitter.emit('badgeNumber', 30);
59-
}
60-
componentWillUnmount() {
61-
BackHandler.removeEventListener('hardwareBackPress', this.onBackButtonPressAndroid);
62-
}
63-
64-
onBackButtonPressAndroid = () => {
65-
if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {
66-
// 最近2秒内按过back键，可以退出应用。
67-
return false;
68-
}
69-
this.lastBackPressed = Date.now();
70-
ToastAndroid.show('再按一次退出应用', ToastAndroid.SHORT);
71-
return true;
72-
};
73-
74-
render() {
75-
return (
76-
<Provider {...RootStore}>
77-
<View
78-
style={{
79-
flex: 1,
80-
backgroundColor: 'white'
81-
}}
82-
>
83-
<AuthLoadingRouter
84-
persistenceKey={navigationPersistenceKey}
85-
renderLoadingExperimental={() => <ActivityIndicator size="large" color="black" />}
86-
onNavigationStateChange={(prevState, currentState) => {
87-
const AppRouter = currentState.routes[1];
88-
if (AppRouter.routes && AppRouter.routes.length > 1) {
89-
BackHandler.removeEventListener('hardwareBackPress', this.onBackButtonPressAndroid);
90-
} else {
91-
BackHandler.addEventListener('hardwareBackPress', this.onBackButtonPressAndroid);
92-
}
93-
}}
94-
/>
95-
<Toast ref={(t: any) => (this.toast = t)} />
96-
</View>
97-
</Provider>
98-
);
99-
}
100-
}

‎app/pages/News/Welfare/index.js‎

Lines changed: 46 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@
22
* @flow
33
* Created by Rabbit on 2019-02-25.
44
*/
5-
import React from 'react';
5+
import React, { useEffect, useRef } from 'react';
66
import { StyleSheet } from 'react-native';
77
import { WaterfallList } from 'react-native-largelist-v3';
88
import { NormalFooter } from 'react-native-spring-scrollview/NormalFooter';
99

1010
import { WelfareMobx } from '../../../mobx/News';
11-
import { inject, observer } from 'mobx-react';
11+
// import { observer, inject } from 'mobx-react';
12+
import { observer } from 'mobx-react-lite';
13+
1214
import type { RTWeal } from '../../../servers/News/interfaces';
1315
import { Button, CustomImage } from '../../../components';
1416
import { System } from '../../../utils';
@@ -18,31 +20,27 @@ import { ConfigStore } from '../../../store/ConfigStore';
1820
import { PublicStore } from '../../../store/PublicStore';
1921
import { ShiTuStore } from '../../../store/ShiTu/ShiTuStore';
2022

23+
const welfareMobx = new WelfareMobx();
24+
2125
type Props = {
2226
navigate: NavigationState,
2327
configStore: ConfigStore,
2428
publicStore: PublicStore,
2529
shiTuStore: ShiTuStore
2630
};
2731

28-
@observer
29-
class Welfare extends React.Component<Props> {
30-
welfareMobx: WelfareMobx;
31-
customPopView: any;
32-
33-
constructor(props: any) {
34-
super(props);
35-
this.welfareMobx = new WelfareMobx();
36-
}
37-
38-
componentDidMount = async () => {
39-
console.log('props', this.props);
32+
const Welfare = observer(function(props: Props) {
33+
const { dataSource, isRefreshing, loadWelfareData } = welfareMobx;
34+
const scrollViewRef: WaterfallList = useRef();
35+
const customPopView: Overlay = useRef();
36+
const { publicStore, configStore, shiTuStore } = props;
4037

41-
await this.welfareMobx.loadWelfareData('refreshing');
42-
};
38+
useEffect(() => {
39+
welfareMobx.loadWelfareData('refreshing');
40+
}, []);
4341

44-
actionSheetToSaveImage = (item: RTWeal) => {
45-
const { saveImageWithIOS, saveImageWithAndroid } = this.props.publicStore;
42+
function actionSheetToSaveImage(item: RTWeal) {
43+
const { saveImageWithIOS, saveImageWithAndroid } = publicStore;
4644
const items = [
4745
{
4846
title: '保存图片',
@@ -52,27 +50,26 @@ class Welfare extends React.Component<Props> {
5250
title: '设置主屏幕',
5351
type: 'default',
5452
onPress: async () => {
55-
this.props.configStore.showToast('设置成功');
56-
// await this.props.
57-
await this.props.shiTuStore.setBackgroundImageUrl(item.url);
53+
configStore.showToast('设置成功');
54+
await shiTuStore.setBackgroundImageUrl(item.url);
5855
}
5956
}
6057
];
6158
const cancelItem = { title: '取消' };
6259
ActionSheet.show(items, cancelItem);
63-
};
60+
}
6461

65-
showPopCustom(item: RTWeal) {
62+
function showPopCustom(item: RTWeal) {
6663
const overlayView = (
6764
<Overlay.PopView
6865
style={{ alignItems: 'center', justifyContent: 'center' }}
6966
overlayOpacity={1}
7067
type="zoomOut"
71-
ref={v => (this.customPopView = v)}
68+
ref={customPopView}
7269
>
7370
<Button
74-
onLongPress={() => this.actionSheetToSaveImage(item)}
75-
onPress={() => this.customPopView && this.customPopView.close()}
71+
onLongPress={() => actionSheetToSaveImage(item)}
72+
onPress={() => customPopView && customPopView.current.close()}
7673
>
7774
<CustomImage
7875
source={{ uri: item.largeUrl }}
@@ -89,37 +86,34 @@ class Welfare extends React.Component<Props> {
8986
Overlay.show(overlayView);
9087
}
9188

92-
renderItem = (item: RTWeal) => {
89+
function renderItem(item: RTWeal) {
9390
return (
94-
<Button onPress={() => this.showPopCustom(item)} style={{ flex: 1 }}>
91+
<Button onPress={() => showPopCustom(item)} style={{ flex: 1 }}>
9592
<CustomImage source={{ uri: item.url }} style={[styles.cell]} />
9693
</Button>
9794
);
98-
};
99-
100-
render() {
101-
const { dataSource, isRefreshing, loadWelfareData } = this.welfareMobx;
102-
return (
103-
<WaterfallList
104-
ref={ref => (this._scrollView = ref)}
105-
data={dataSource}
106-
style={styles.container}
107-
heightForItem={item => item.height + 10}
108-
preferColumnWidth={SCREEN_WIDTH / 2 - 10}
109-
renderItem={this.renderItem}
110-
onRefresh={() => {
111-
loadWelfareData('refreshing');
112-
!isRefreshing && this._scrollView.endRefresh(); // 报错
113-
}}
114-
onLoading={async () => {
115-
loadWelfareData('load more');
116-
this._scrollView.endLoading();
117-
}}
118-
// loadingFooter={NormalFooter}
119-
/>
120-
);
12195
}
122-
}
96+
97+
return (
98+
<WaterfallList
99+
ref={scrollViewRef}
100+
data={dataSource}
101+
style={styles.container}
102+
heightForItem={item => item.height + 10}
103+
preferColumnWidth={SCREEN_WIDTH / 2 - 10}
104+
renderItem={renderItem}
105+
onRefresh={() => {
106+
loadWelfareData('refreshing');
107+
!isRefreshing && scrollViewRef.current.endRefresh(); // 报错
108+
}}
109+
onLoading={async () => {
110+
loadWelfareData('load more');
111+
scrollViewRef && scrollViewRef.current.endLoading();
112+
}}
113+
// loadingFooter={NormalFooter}
114+
/>
115+
);
116+
});
123117

124118
export { Welfare };
125119

‎app/routers/AppRouter.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const MyTab = createBottomTabNavigator(
5050
}
5151
},
5252
{
53-
// initialRouteName: 'Hook',
53+
initialRouteName: 'News',
5454
backBehavior: 'none',
5555
// lazy: false,
5656
// navigationOptions: ({ navigation }) => NavigationOptions(navigation),

0 commit comments

Comments
 (0)