Skip to content

Commit e767df4

Browse files
CodeXYuCodeXYu
committed
1. 重构News的外层页面
1 parent fca3f31 commit e767df4

File tree

8 files changed

+115
-157
lines changed

8 files changed

+115
-157
lines changed

‎app/index.js‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*/
55

66
import React, { useEffect } from 'react';
7-
import { View, ActivityIndicator, DeviceEventEmitter, BackHandler, ToastAndroid } from 'react-native';
7+
import { View, ActivityIndicator, DeviceEventEmitter, BackHandler, ToastAndroid, StyleSheet } from 'react-native';
88

99
import { AuthLoadingRouter } from './routers/AuthLoading';
1010
import * as rootStore from './store/RootStore';
@@ -37,12 +37,7 @@ function index() {
3737

3838
return (
3939
<StoreContext.Provider value={rootStore}>
40-
<View
41-
style={{
42-
flex: 1,
43-
backgroundColor: 'white'
44-
}}
45-
>
40+
<View style={styles.container}>
4641
<AuthLoadingRouter
4742
// persistenceKey={navigationPersistenceKey}
4843
renderLoadingExperimental={() => <ActivityIndicator size="large" color="black" />}
@@ -63,4 +58,11 @@ function index() {
6358
);
6459
}
6560

61+
const styles = StyleSheet.create({
62+
container: {
63+
flex: 1,
64+
backgroundColor: 'white'
65+
}
66+
});
67+
6668
export default index;

‎app/pages/Main/index.js‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -32,23 +32,6 @@ export class Main extends Component<Props, any> {
3232
popView: any;
3333
badgeNumber: number = 10;
3434

35-
// static navigationOptions = ({ navigation }: { navigation: any }) => {
36-
// const badgeNumber = navigation.state.params && navigation.state.params.badgeNumber;
37-
//
38-
// const tabBarButtonComponent = (props: any) => {
39-
// console.log('tabBarButtonComponent', props);
40-
// return [
41-
// <TouchableOpacity {...props} activeOpacity={1} style={{ width: SCREEN_WIDTH / 3 }} key={'tabBar'} />,
42-
// <Badge
43-
// count={badgeNumber}
44-
// key={'Badge'}
45-
// style={{ position: 'absolute', left: SCREEN_WIDTH - 60, top: 5 }}
46-
// />
47-
// ];
48-
// };
49-
// return { tabBarButtonComponent };
50-
// };
51-
5235
static navigationOptions = {};
5336

5437
constructor(props: Props) {

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,12 @@ import type { RTBuDeJieType } from '../../../servers/News';
2323
import { LargeList, WaterfallList } from 'react-native-largelist-v3';
2424
import { System } from '../../../utils';
2525
import { PublicStore } from '../../../store/PublicStore';
26-
import { ConfigStore } from '../../../store/ConfigStore';
2726
// import { ChineseWithLastDateFooter } from 'react-native-spring-scrollview/Customize';
2827

2928
type Props = {
3029
type: RTBuDeJieType | string,
3130
navigation: NavigationState,
32-
publicStore: PublicStore,
33-
configStore: ConfigStore
31+
publicStore: PublicStore
3432
};
3533

3634
function actionSheetToSaveImage(url: string, props: Props) {

‎app/pages/News/News.js‎

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

6-
import React, { useContext, useEffect } from 'react';
7-
import { StyleSheet, View } from 'react-native';
6+
import React, { useContext, useState } from 'react';
7+
import { StyleSheet } from 'react-native';
88

99
import BaseContainer from '../../components/BaseContainer';
1010

11-
// import { observer, inject } from 'mobx-react';
12-
import { observer } from 'mobx-react-lite';
11+
import { observer, useObserver } from 'mobx-react-lite';
1312

1413
import ScrollableTabView, { DefaultTabBar } from 'react-native-scrollable-tab-view';
1514

1615
import { Welfare } from './Welfare';
1716
import { BuDeJie } from './BuDeJie';
18-
// import { BuDeJieDetail } from './BuDeJieDetail';
1917

20-
import type { NavigationState } from 'react-navigation';
21-
import type { RTBuDeJieType } from '../../servers/News';
2218
import { StoreContext } from '../../utils/Tool';
23-
import { BaseItem } from './BuDeJie/Components/BaseItem';
24-
import { BuDeJieMobx } from '../../mobx/News';
2519

26-
import { TabView, TabBar, SceneMap } from 'react-native-tab-view';
20+
import { TabView, TabBar } from 'react-native-tab-view';
2721

2822
type typeItem = {
2923
title: string,
30-
type: RTBuDeJieType | string
24+
type: string,
25+
key: number
3126
};
3227

3328
const typeArr: Array<typeItem> = [
34-
{ title: '全部', type: 1 },
35-
{ title: '视频', type: 41 },
36-
{ title: '图片', type: 10 },
37-
{ title: '笑话', type: 29 },
38-
{ title: '福利', type: '福利' }
29+
{ key: 'ALL', title: '全部', type: 1 },
30+
{ key: 'VIDEO', title: '视频', type: 41 },
31+
{ key: 'PICTURE', title: '图片', type: 10 },
32+
{ key: 'JOKE', title: '笑话', type: 29 },
33+
{ key: 'WELFARE', title: '福利', type: '福利' }
3934
];
4035

41-
type State = NavigationState<{
42-
key: string,
43-
title: string
44-
}>;
45-
46-
class News extends React.Component<{}, State> {
47-
static title = 'Scrollable top bar';
48-
static backgroundColor = '#3f51b5';
49-
static appbarElevation = 0;
50-
51-
constructor(props: {}) {
52-
super(props);
53-
this.state = {
54-
index: 0,
55-
routes: [
56-
{ key: 'ALL', title: '全部', type: 1 },
57-
{ key: 'VIDEO', title: '视频', type: 41 },
58-
{ key: 'PICTURE', title: '图片', type: 10 },
59-
{ key: 'JOKE', title: '笑话', type: 29 },
60-
{ key: 'WELFARE', title: '福利', type: '福利' }
61-
]
36+
const typeData = {
37+
index: 0,
38+
routes: typeArr
39+
};
40+
41+
const News = observer(props => {
42+
const store = useContext(StoreContext);
43+
const { navigation } = props;
44+
const { publicStore, shiTuStore } = store;
45+
46+
const [type, setType] = useState(typeData);
47+
48+
function _handleIndexChange(index) {
49+
const _type = {
50+
index: index,
51+
routes: typeArr
6252
};
53+
setType(_type);
6354
}
64-
_handleIndexChange = index =>
65-
this.setState({
66-
index
67-
});
6855

69-
_renderTabBar = props => {
70-
console.log('props', props);
56+
function _renderTabBar(props) {
7157
return (
7258
<TabBar
7359
{...props}
@@ -78,56 +64,41 @@ class News extends React.Component<{}, State> {
7864
labelStyle={styles.label}
7965
activeColor={'#4ECBFC'}
8066
inactiveColor={'black'}
81-
// renderIndicator={() => (
82-
// <View style={{backgroundColor: 'red', height: 1, width: SCREEN_WIDTH / 4 }}/>
83-
// )}
8467
/>
8568
);
86-
};
87-
88-
// _renderScene = SceneMap({
89-
// albums: Welfare,
90-
// contacts: BuDeJie,
91-
// article: BuDeJie,
92-
// chat: BuDeJie
93-
// });
69+
}
9470

95-
_renderScene = ({route, jumpTo}) => {
71+
function _renderScene({ route, jumpTo }: { route: typeItem, jumpTo: Function }) {
9672
// console.log('route', route);
97-
switch (route.key) {
98-
case 'WELFARE':
99-
return <Welfare jumpTo={jumpTo} navigation={this.props.navigation} type={route.type} />;
100-
default:
101-
return <BuDeJie jumpTo={jumpTo} navigation={this.props.navigation} type={route.type} />;
102-
// case 'ALL':
103-
// return
104-
// case 'VIDEO':
105-
// return <BuDeJie jumpTo={jumpTo} navigation={this.props.navigation} type={route.type} />;
106-
// case 'PICTURE':
107-
// return <BuDeJie jumpTo={jumpTo} navigation={this.props.navigation} type={route.type} />;
108-
// case 'JOKE':
109-
// return <BuDeJie jumpTo={jumpTo} navigation={this.props.navigation} type={route.type} />;
110-
//
111-
}
112-
};
113-
114-
render() {
115-
return (
116-
<BaseContainer title={'百思不得姐'} isTopNavigator={true}>
117-
<TabView
118-
// style={this.props.style}
119-
navigationState={this.state}
120-
renderScene={this._renderScene}
121-
renderTabBar={this._renderTabBar}
122-
onIndexChange={this._handleIndexChange}
123-
lazy={true}
124-
swipeDistanceThreshold={SCREEN_WIDTH / 10}
125-
initialLayout={{ width: SCREEN_WIDTH }}
73+
if (route.key === 'WELFARE') {
74+
return (
75+
<Welfare
76+
jumpTo={jumpTo}
77+
navigation={navigation}
78+
type={route.type}
79+
publicStore={publicStore}
80+
shiTuStore={shiTuStore}
12681
/>
127-
</BaseContainer>
128-
);
82+
);
83+
} else {
84+
return <BuDeJie jumpTo={jumpTo} navigation={navigation} type={route.type} publicStore={publicStore} />;
85+
}
12986
}
130-
}
87+
88+
return useObserver(() => (
89+
<BaseContainer title={'百思不得姐'} isTopNavigator={true}>
90+
<TabView
91+
navigationState={type}
92+
renderScene={_renderScene}
93+
renderTabBar={_renderTabBar}
94+
onIndexChange={_handleIndexChange}
95+
lazy={true}
96+
swipeDistanceThreshold={SCREEN_WIDTH / 10}
97+
initialLayout={{ width: SCREEN_WIDTH }}
98+
/>
99+
</BaseContainer>
100+
));
101+
});
131102

132103
const News1 = observer(function(props) {
133104
const store = useContext(StoreContext);

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,13 @@ import { Button, CustomImage } from '../../../components';
1616
import { System } from '../../../utils';
1717
import { ActionSheet, Overlay } from 'teaset';
1818
import type { NavigationState } from 'react-navigation';
19-
import { ConfigStore } from '../../../store/ConfigStore';
2019
import { PublicStore } from '../../../store/PublicStore';
2120
import { ShiTuStore } from '../../../store/ShiTu/ShiTuStore';
2221

2322
const welfareMobx = new WelfareMobx();
2423

2524
type Props = {
2625
navigate: NavigationState,
27-
configStore: ConfigStore,
2826
publicStore: PublicStore,
2927
shiTuStore: ShiTuStore
3028
};
@@ -33,7 +31,7 @@ const Welfare = observer(function(props: Props) {
3331
const { dataSource, isRefreshing, loadWelfareData } = welfareMobx;
3432
const waterfallRef: WaterfallList = useRef();
3533
const customOverlayRef: Overlay = useRef();
36-
const { publicStore, configStore, shiTuStore } = props;
34+
const { publicStore, shiTuStore } = props;
3735

3836
useEffect(() => {
3937
loadWelfareData('refreshing');
@@ -50,7 +48,7 @@ const Welfare = observer(function(props: Props) {
5048
title: '设置主屏幕',
5149
type: 'default',
5250
onPress: async () => {
53-
configStore.showToast('设置成功');
51+
welfareMobx.showToast('设置成功');
5452
await shiTuStore.setBackgroundImageUrl(item.url);
5553
}
5654
}

app/pages/WebView/index.js renamed to app/pages/STWebView/index.js

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,13 @@
44
*/
55

66
import React from 'react';
7-
import { StyleSheet, Text, View, StatusBar, Alert } from 'react-native';
7+
import { StyleSheet, Text, View, StatusBar, Alert, AppState } from 'react-native';
88
import { ProgressBar, Button } from '../../components';
99
import { System } from '../../utils';
1010
import { WebView } from 'react-native-webview';
1111

1212
import ActionButton from 'react-native-action-button';
1313
import Icon from 'react-native-vector-icons/Ionicons';
14-
import { Theme } from 'teaset';
1514
import BaseContainer from '../../components/BaseContainer';
1615
import { StoreContext } from '../../utils/Tool';
1716

@@ -53,28 +52,36 @@ export default class index extends React.Component<Props, State> {
5352
const { configStore } = this.context;
5453
configStore.showLoading();
5554

56-
StatusBar.pushStackEntry({
57-
animated: false,
58-
showHideTransition: 'fade',
59-
backgroundColor: 'white',
60-
barStyle: 'light-content',
61-
translucent: true,
62-
hidden: false,
63-
networkActivityIndicatorVisible: false
64-
});
55+
AppState.addEventListener('change', this._handleAppStateChange);
56+
57+
// StatusBar.pushStackEntry({
58+
// animated: false,
59+
// showHideTransition: 'fade',
60+
// backgroundColor: 'white',
61+
// barStyle: 'light-content',
62+
// translucent: true,
63+
// hidden: false,
64+
// networkActivityIndicatorVisible: false
65+
// });
6566
}
6667

6768
onWillFocus = () => {
6869
StatusBar.setHidden(false);
69-
}
70+
};
7071

7172
componentWillUnmount() {
73+
StatusBar.setHidden(false);
7274
const { configStore } = this.context;
7375
configStore.hideLoading();
74-
// this.props.configStore.hideLoading();
75-
76+
AppState.removeEventListener('change', this._handleAppStateChange);
7677
}
7778

79+
_handleAppStateChange = appState => {
80+
console.log('App状态', appState);
81+
82+
StatusBar.setHidden(false);
83+
};
84+
7885
reload = () => {
7986
console.log('刷新');
8087
this.webView.reload();
@@ -225,7 +232,9 @@ export default class index extends React.Component<Props, State> {
225232
onLoadEnd={this.onLoadEnd}
226233
onLoadStart={this.onLoadStart}
227234
onError={this.onError}
228-
mediaPlaybackRequiresUserAction={true}
235+
mediaPlaybackRequiresUserAction={false}
236+
allowsInlineMediaPlayback={true}
237+
userAgent={'anti_DNS_kidnapping'}
229238
/>
230239
{this.renderActionButton()}
231240
</BaseContainer>

0 commit comments

Comments
 (0)