Skip to content

Commit a220a89

Browse files
FTD-ZFFTD-ZF
committed
修改react-navigation导航使用方式
1 parent 8b7624f commit a220a89

9 files changed

Lines changed: 124 additions & 102 deletions

File tree

‎src/commons/components/Tab.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export default class Tab extends Component {
4040

4141
return (
4242
<TouchableOpacity
43+
activeOpacity={0.8}
4344
key={route.key}
4445
style={styles.tabItem}
4546
onPress={() => jumpTo(route.key)}>
@@ -69,6 +70,7 @@ export default class Tab extends Component {
6970
{routes && routes.map((route, index) => this.renderItem(route, index))}
7071
</View>
7172
<TouchableOpacity
73+
activeOpacity={0.8}
7274
// key={"centerView"}
7375
style={[styles.tabItem, {
7476
position: 'absolute', bottom: 0,

‎src/commons/components/navConfig.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const activeTabColor = '#38ADFF';// 底部文字和图片选中颜色
77
const defaultTabColor = '#949494';//文字和图片未选中颜色
88

99
const headerOptions = props => {
10-
const { navigation, navigationOptions, visible = true, back = false, right = false, onRightPress } = props
10+
const { navigation, navigationOptions, visible = true, back = true, right = false, onRightPress } = props
1111
const { goBack } = navigation
1212
const headerLeft = back ? (
1313
<TouchableOpacity onPress={() => goBack(null)}>

‎src/navigation.js‎

Lines changed: 83 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,10 @@ import {
1212
} from 'react-navigation';
1313
import { headerOptions, RouteConfigs, } from './commons/components/navConfig';
1414

15-
import { HomeTab, MineTab, DetailsView, CenterView, LoginView, OnePageView, TwoPageView, VideoPage, PlaceHolderPage, FontAdapterPage, DragListItemPage } from './root';
15+
// import { HomeTab, MineTab, DetailsView, CenterView, LoginView, OnePageView, TwoPageView, VideoPage, PlaceHolderPage, FontAdapterPage, DragListItemPage } from './root';
1616
import { AppColors, AppStyles } from './commons/styles/index';
1717
import CustomTabComponent from './commons/components/Tab';
18+
import { PageName } from './root';
1819
const TabBarText = {
1920
home: '首页',
2021
centertext: '新增',
@@ -23,9 +24,9 @@ const TabBarText = {
2324

2425
const TabNavigator = createBottomTabNavigator(
2526
{
26-
Home: {
27+
HomeTab: {
2728

28-
screen: HomeTab,
29+
screen: PageName.HomeTab,
2930
navigationOptions: props => {
3031
return RouteConfigs({
3132
imgSource: require('../src/assets/imgs/homeSelect.png'),
@@ -36,8 +37,8 @@ const TabNavigator = createBottomTabNavigator(
3637

3738

3839
},
39-
Center: {
40-
screen: CenterView,
40+
CenterView: {
41+
screen: PageName.CenterView,
4142
navigationOptions: props => {
4243
return RouteConfigs({
4344
imgSource: require('../src/assets/imgs/homeSelect.png'),
@@ -48,8 +49,8 @@ const TabNavigator = createBottomTabNavigator(
4849

4950

5051
},
51-
Mine: {
52-
screen: MineTab,
52+
MineTab: {
53+
screen: PageName.MineTab,
5354
navigationOptions: props => {
5455
return RouteConfigs({
5556
imgSource: require('../src/assets/imgs/homeSelect.png'),
@@ -89,93 +90,75 @@ TabNavigator.navigationOptions = ({ navigation, screenProps }) => {
8990
}
9091
}
9192

92-
const stackNavigators = createStackNavigator(
93-
{
94-
Root: {
95-
screen: TabNavigator,
9693

97-
},
98-
DetailsView: {
99-
screen: DetailsView,
100-
navigationOptions: props => {
101-
return headerOptions({
102-
...props,
103-
...{
104-
back: true,
105-
},
106-
})
107-
},
108-
},
109-
OnePageView: {
110-
screen: OnePageView,
111-
navigationOptions: props => {
112-
return headerOptions({
113-
...props,
114-
...{
115-
back: true,
116-
},
117-
})
118-
},
119-
},
120-
TwoPageView: {
121-
screen: TwoPageView,
122-
navigationOptions: props => {
123-
return headerOptions({
124-
...props,
125-
...{
126-
back: true,
127-
},
128-
})
129-
},
130-
},
131-
VideoPage: {
132-
screen: VideoPage,
133-
navigationOptions: props => {
134-
return headerOptions({
135-
...props,
136-
...{
137-
back: true,
138-
},
139-
})
140-
},
141-
},
142-
PlaceHolderPage: {
143-
screen: PlaceHolderPage,
144-
navigationOptions: props => {
145-
return headerOptions({
146-
...props,
147-
...{
148-
back: true,
149-
},
150-
})
151-
},
152-
},
153-
FontAdapterPage: {
154-
screen: FontAdapterPage,
155-
navigationOptions: props => {
156-
return headerOptions({
157-
...props,
158-
...{
159-
back: true,
160-
},
161-
})
162-
},
163-
},
164-
DragListItemPage: {
165-
screen: DragListItemPage,
166-
navigationOptions: props => {
167-
return headerOptions({
168-
...props,
169-
...{
170-
back: true,
171-
},
172-
})
173-
},
174-
},
17594

95+
const stackPageNavigationOptions = (props, boolBack) => {
96+
return headerOptions({
97+
...props,
98+
...{
99+
back: boolBack,
100+
},
101+
})
102+
}
176103

104+
const Pages = {
105+
Root: {
106+
screen: TabNavigator,
107+
},
108+
DetailsView: {
109+
screen: PageName.DetailsView,
110+
navigationOptions: stackPageNavigationOptions
111+
},
112+
OnePageView: {
113+
screen: PageName.OnePageView,
114+
navigationOptions: stackPageNavigationOptions
115+
},
116+
TwoPageView: {
117+
screen: PageName.TwoPageView,
118+
navigationOptions: stackPageNavigationOptions
119+
},
120+
VideoPage: {
121+
screen: PageName.VideoPage,
122+
navigationOptions: stackPageNavigationOptions
123+
},
124+
PlaceHolderPage: {
125+
screen: PageName.PlaceHolderPage,
126+
navigationOptions: stackPageNavigationOptions
177127
},
128+
FontAdapterPage: {
129+
screen: PageName.FontAdapterPage,
130+
navigationOptions: stackPageNavigationOptions
131+
},
132+
DragListItemPage: {
133+
screen: PageName.DragListItemPage,
134+
navigationOptions: stackPageNavigationOptions
135+
},
136+
137+
}
138+
139+
const stackNavigators = createStackNavigator(Pages,
140+
178141
{
142+
143+
// navigationOptions: ({ navigation } = 0) => {
144+
// return {
145+
// headerStyle: {
146+
// backgroundColor: AppColors.themecolor,
147+
// borderBottomWidth: 0,
148+
// },
149+
// headerTitleStyle: {
150+
// color: '#ffffff',
151+
// alignSelf: 'center',
152+
// justifyContent: 'center',
153+
// alignItems: 'center',
154+
// },
155+
// headerTintColor: '#ffffff',
156+
// headerBackTitle: null,
157+
// gesturesEnabled: false,
158+
// };
159+
// },
160+
161+
179162
// // defaultNavigationOptions: ({ navigation }) => {
180163

181164
// // return {
@@ -213,15 +196,24 @@ const stackNavigators = createStackNavigator(
213196
}
214197
})
215198

199+
}
216200

217201

218-
}
219202
);
220203

204+
// stackNavigators.navigationOptions = (props) => {
205+
// return headerOptions({
206+
// ...props,
207+
// ...{
208+
// back: false,
209+
210+
// },
211+
// })
212+
// };
221213

222214
const SwitchNavigator = createSwitchNavigator(
223215
{
224-
Login: LoginView,
216+
Login: PageName.LoginView,
225217
App: stackNavigators,
226218
},
227219
{

‎src/pages/center/index.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
} from 'react-native';
1616
import { Toast } from 'teaset';
1717
import NavigationService from '../../commons/components/navigationService.js';
18+
import { NavPages } from '../../root.js';
1819

1920
export default class Index extends Component {
2021
static navigationOptions = ({ navigation }) => ({
@@ -44,19 +45,20 @@ export default class Index extends Component {
4445
}
4546

4647
_toPlayVideo() {
47-
NavigationService.navigate('VideoPage')
48+
NavigationService.navigate(NavPages.VideoPage)
4849
}
4950

5051
_toPlaceHolder() {
51-
NavigationService.navigate('PlaceHolderPage')
52+
NavigationService.navigate(NavPages.PlaceHolderPage)
5253
}
5354

5455
_toFontAdapter() {
55-
NavigationService.navigate('FontAdapterPage');
56+
NavigationService.navigate(NavPages.FontAdapterPage);
5657
}
5758

5859
_dragListItem() {
59-
NavigationService.navigate('DragListItemPage')
60+
61+
NavigationService.navigate(NavPages.DragListItemPage)
6062
}
6163

6264
render() {

‎src/pages/details.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
import { AppColors } from '../commons/styles';
1919
import NavigationService from '../commons/components/navigationService';
2020
import DragSortableView from 'react-native-drag-sort';
21+
import { NavPages } from '../root';
2122

2223
const { width } = Dimensions.get('window')
2324

@@ -60,7 +61,7 @@ export default class Index extends Component {
6061
}
6162

6263
_toNextPage() {
63-
NavigationService.navigate('OnePageView');
64+
NavigationService.navigate(NavPages.OnePageView);
6465
}
6566

6667
render() {

‎src/pages/home/index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import moment from 'moment';
4040
import CountDown from 'react-native-countdown-component';
4141
import SDCountDownTimeLabel from './SDCountDownTimeLabel';
4242
import CusProgress from '../../commons/components/CusProgress';
43+
import { NavPages } from '../../root';
4344
// import ProgressBar from 'react-native-progress-bar';
4445

4546

@@ -71,7 +72,7 @@ export default class Index extends Component {
7172
// 构造
7273
constructor(props) {
7374
super(props);
74-
75+
7576
this.timeid = '1';
7677
this.testStore = this.props.rootStore.testStore;
7778
// 初始状态
@@ -113,7 +114,7 @@ export default class Index extends Component {
113114

114115
_todetails() {
115116

116-
NavigationService.navigate('DetailsView', {
117+
NavigationService.navigate(NavPages.DetailsView, {
117118
headername: '详情',
118119
callback: (str) => this.props.navigation.state.params.torefresh(str),
119120
});

‎src/pages/home/testpages/onepage.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
} from 'react-native';
1616
import { AppColors } from '../../../commons/styles/index';
1717
import NavigationService from '../../../commons/components/navigationService';
18+
import { NavPages } from '../../../root';
1819

1920
export default class OnePage extends Component {
2021
static navigationOptions = ({ navigation }) => {
@@ -40,7 +41,7 @@ export default class OnePage extends Component {
4041
}
4142

4243
_toNextPage() {
43-
NavigationService.navigate('TwoPageView');
44+
NavigationService.navigate(NavPages.TwoPageView);
4445
}
4546

4647
render() {

‎src/pages/login/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import { Toast } from 'teaset';
2626

2727
import { observer, inject } from "mobx-react";
2828
import NavigationService from '../../commons/components/navigationService';
29+
import { NavPages } from '../../root';
2930

3031
@inject('rootStore')
3132
@observer
@@ -53,7 +54,7 @@ export default class Index extends Component {
5354
}
5455

5556
_toLogin() {
56-
NavigationService.navigate('Home');
57+
NavigationService.navigate(NavPages.HomeTab);
5758
}
5859

5960
render() {

0 commit comments

Comments
 (0)