Skip to content

Commit cbb3528

Browse files
CodeXYuCodeXYu
committed
1. ShiTu.js 完全function化，除了mobx不能正确observer导致useEffect不能使用的问题
2. 删除inject的注入方式，使用官网推荐的Contenxt方式 3. 优化目录结构，ShiTuMode提升为ShiTuStore
1 parent 83cb5f2 commit cbb3528

File tree

14 files changed

+243
-204
lines changed

14 files changed

+243
-204
lines changed

‎app/index.js‎

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,43 @@ import { AuthLoadingRouter } from './routers/AuthLoading';
1010
// import {SafeAreaView} from 'react-navigation';
1111
import { Toast } from './components';
1212
import { Provider } from 'mobx-react';
13-
import * as RootStore from './store/RootStore';
13+
import * as rootStore from './store/RootStore';
1414

1515
import SplashScreen from 'react-native-splash-screen';
16+
import { StoreContext } from './utils/Tool';
1617

1718
const navigationPersistenceKey = __DEV__ ? 'NavigationStateDEV' : null;
1819

19-
export default class index extends React.Component<any> {
20+
function index() {
21+
return (
22+
<StoreContext.Provider value={rootStore}>
23+
<View
24+
style={{
25+
flex: 1,
26+
backgroundColor: 'white'
27+
}}
28+
>
29+
<AuthLoadingRouter
30+
// persistenceKey={navigationPersistenceKey}
31+
renderLoadingExperimental={() => <ActivityIndicator size="large" color="black" />}
32+
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+
// }
39+
}}
40+
/>
41+
<Toast ref={(t: any) => (this.toast = t)} />
42+
</View>
43+
</StoreContext.Provider>
44+
);
45+
}
46+
47+
export default index;
48+
49+
class index1 extends React.Component<any> {
2050
toast: Toast;
2151

2252
constructor(props: any) {

‎app/pages/Hook/index.js‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,36 @@
22
* @flow
33
* Created by Rabbit on 2019-03-14.
44
*/
5-
import React, { useState } from 'react';
5+
import React, { useState, useContext } from 'react';
66
import { View, Text, StyleSheet } from 'react-native';
7+
import { StoreContext } from '../../utils/Tool';
8+
9+
export function Hook() {
10+
// console.log('context', props, context);
11+
12+
// const StoreContext = React.createContext();
13+
const store = useContext(StoreContext);
14+
15+
console.log('store', store);
716

8-
export const Main = () => {
917
const [title, setTitle] = useState('123');
1018
return (
11-
<View style={styles.container}>
19+
<View style={[styles.container]}>
1220
<Text
1321
onPress={() => {
14-
setTitle('4444');
22+
setTitle(store.publicStore.aaa);
1523
}}
1624
>
1725
{title}
1826
</Text>
1927
</View>
2028
);
21-
};
29+
}
2230

2331
const styles = StyleSheet.create({
2432
container: {
25-
flex: 1
33+
flex: 1,
34+
alignItems: 'center',
35+
justifyContent: 'center'
2636
}
2737
});

‎app/pages/News/News.js‎

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

6-
import React from 'react';
6+
import React, { useContext, useEffect } from 'react';
77

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

10-
import { observer, inject } from 'mobx-react';
10+
// import { observer, inject } from 'mobx-react';
11+
import { observer } from 'mobx-react-lite';
1112

12-
// import ScrollableTabView from '../../components/ScrollableTabView';
1313
import ScrollableTabView, { DefaultTabBar } from 'react-native-scrollable-tab-view';
1414

1515
import { Welfare } from './Welfare';
@@ -19,72 +19,66 @@ import { BuDeJieDetail } from './BuDeJieDetail';
1919

2020
import type { NavigationState } from 'react-navigation';
2121
import type { RTBuDeJieType } from '../../servers/News';
22-
23-
type State = {
24-
typeArr: Array<typeItem>
25-
};
22+
import { StoreContext } from '../../utils/Tool';
2623

2724
type typeItem = {
2825
title: string,
29-
type: RTBuDeJieType | string,
30-
navigate: NavigationState
26+
type: RTBuDeJieType | string
3127
};
3228

33-
@inject('powerStore', 'configStore')
34-
@observer
35-
class News extends React.Component<any, State> {
36-
componentDidMount = async () => {
37-
console.log('navigation', this.props.navigation);
38-
this.props.navigation.setParams({
39-
title: '百思不得姐'
40-
});
41-
};
29+
const typeArr: Array<typeItem> = [
30+
{ title: '福利', type: '福利' },
31+
{ title: '笑话', type: 29 },
32+
{ title: '图片', type: 10 },
33+
{ title: '全部', type: 1 },
34+
{ title: '视频', type: 41 }
35+
];
36+
37+
const News = observer(function(props) {
38+
const store = useContext(StoreContext);
39+
const { configStore, publicStore, shiTuStore } = store;
40+
const { navigate } = props.navigation;
4241

43-
constructor(props: any) {
44-
super(props);
45-
const { navigate } = this.props.navigation;
46-
this.state = {
47-
typeArr: [
48-
{ title: '笑话', type: 29, navigate: navigate },
49-
{ title: '图片', type: 10, navigate: navigate },
50-
{ title: '全部', type: 1, navigate: navigate },
51-
{ title: '视频', type: 41, navigate: navigate },
52-
{ title: '福利', type: '福利', navigate: navigate }
53-
]
54-
};
55-
}
42+
console.log('store', store);
5643

57-
render() {
58-
return (
59-
<BaseContainer title={'百思不得姐'} isTopNavigator={true}>
60-
<ScrollableTabView
61-
renderTabBar={() => <DefaultTabBar />}
62-
// renderTabBar={() => <ScrollableTabView.DefaultTabBar />}
63-
tabBarActiveTextColor="#4ECBFC"
64-
tabBarInactiveTextColor="black"
65-
tabBarBackgroundColor="white"
66-
tabBarUnderlineStyle={{ backgroundColor: '#4ECBFC', height: 2 }}
67-
tabBarTextStyle={{ fontSize: 15 }}
68-
>
69-
{this.state.typeArr.map((item, i) => {
70-
if (i === 4) {
71-
return (
72-
<Welfare
73-
tabLabel={item.title}
74-
key={i}
75-
navigate={item.navigate}
76-
configStore={this.props.configStore}
77-
powerStore={this.props.powerStore}
78-
/>
79-
);
80-
} else {
81-
return <BuDeJie type={item.type} tabLabel={item.title} key={i} navigate={item.navigate} />;
82-
}
83-
})}
84-
</ScrollableTabView>
85-
</BaseContainer>
86-
);
87-
}
88-
}
44+
return (
45+
<BaseContainer title={'百思不得姐'} isTopNavigator={true}>
46+
<ScrollableTabView
47+
renderTabBar={() => <DefaultTabBar />}
48+
// renderTabBar={() => <ScrollableTabView.DefaultTabBar />}
49+
tabBarActiveTextColor="#4ECBFC"
50+
tabBarInactiveTextColor="black"
51+
tabBarBackgroundColor="white"
52+
tabBarUnderlineStyle={{ backgroundColor: '#4ECBFC', height: 2 }}
53+
tabBarTextStyle={{ fontSize: 15 }}
54+
>
55+
{typeArr.map((item, i) => {
56+
if (i === 0) {
57+
return (
58+
<Welfare
59+
tabLabel={item.title}
60+
key={i}
61+
navigate={navigate}
62+
configStore={configStore}
63+
publicStore={publicStore}
64+
shiTuStore={shiTuStore}
65+
/>
66+
);
67+
} else {
68+
return (
69+
<BuDeJie
70+
type={item.type}
71+
tabLabel={item.title}
72+
key={i}
73+
navigate={navigate}
74+
publicStore={publicStore}
75+
/>
76+
);
77+
}
78+
})}
79+
</ScrollableTabView>
80+
</BaseContainer>
81+
);
82+
});
8983

9084
export { News, Welfare, BuDeJie, BuDeJieDetail };

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,17 @@ import { Button, CustomImage } from '../../../components';
1414
import { System } from '../../../utils';
1515
import { ActionSheet, Overlay } from 'teaset';
1616
import type { NavigationState } from 'react-navigation';
17-
import { PowerStore } from '../../../store/PowerStore';
1817
import { ConfigStore } from '../../../store/ConfigStore';
1918
import { PublicStore } from '../../../store/PublicStore';
19+
import { ShiTuStore } from '../../../store/ShiTu/ShiTuStore';
2020

2121
type Props = {
2222
navigate: NavigationState,
23-
powerStore: PowerStore,
2423
configStore: ConfigStore,
25-
publicStore: PublicStore
24+
publicStore: PublicStore,
25+
shiTuStore: ShiTuStore
2626
};
27-
@inject('publicStore')
27+
2828
@observer
2929
class Welfare extends React.Component<Props> {
3030
welfareMobx: WelfareMobx;
@@ -36,6 +36,8 @@ class Welfare extends React.Component<Props> {
3636
}
3737

3838
componentDidMount = async () => {
39+
console.log('props', this.props);
40+
3941
await this.welfareMobx.loadWelfareData('refreshing');
4042
};
4143

@@ -51,7 +53,8 @@ class Welfare extends React.Component<Props> {
5153
type: 'default',
5254
onPress: async () => {
5355
this.props.configStore.showToast('设置成功');
54-
await this.props.powerStore.setShiTuBackgroundImage(item.url);
56+
// await this.props.
57+
await this.props.shiTuStore.setBackgroundImageUrl(item.url);
5558
}
5659
}
5760
];

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,12 @@ import { RTWeal } from '../../../servers/News/interfaces';
1717
import { System } from '../../../utils';
1818
import { ActionSheet, Overlay } from 'teaset';
1919
import { inject } from 'mobx-react';
20-
import { PowerStore } from '../../../store/PowerStore';
2120

2221
type Props = {
2322
navigate: NavigationState,
24-
powerStore: PowerStore
2523
};
2624

27-
@inject('powerStore')
25+
@inject('shiTuStore')
2826
@observer
2927
class Welfare extends React.Component<Props> {
3028
welfareMobx: WelfareMobx;
@@ -53,7 +51,7 @@ class Welfare extends React.Component<Props> {
5351
type: 'default',
5452
onPress: async () => {
5553
// alert('设置成功');
56-
await this.props.powerStore.setShiTuBackgroundImage(item.url);
54+
await this.props.shiTuStore.setShiTuBackgroundImage(item.url);
5755
}
5856
}
5957
];

0 commit comments

Comments
 (0)