我在我的react本机项目中使用react导航并应用嵌套的stacknavigator。从Google上,我可以看到人们禁止显示2个标题,他们会在headerMode = 'none'
内部设置stacknavigator
。
下面是导航代码。
CourseMasterListNavigator.js
const CourseMasterListNavigator = createStackNavigator(
{
CourseMasterList: {
screen: CourseMasterList,
path: 'CourseMasterList',
navigationOptions: () => ({
headerBackTitle: null,
headerLeft: <MenuButton />
}),
},
CourseDetail: {
screen: CourseDetail,
path: 'CourseDetail',
navigationOptions: () => ({
title: `Hide this and the tab`,
}),
},
}, {
// headerMode: 'none',
defaultNavigationOptions: {
headerStyle: {
backgroundColor: '#e6e400',
borderBottomWidth: 0
},
headerTintColor: '#000'
},
navigationOptions: {
title: '我的课程',
}
}
);
CourseDetail.js
const CourseDetail = createMaterialTopTabNavigator(
{
Date: { screen: CourseDetailDateNavigator },
Material: { screen: CourseDetailMaterialNavigator },
Homework: { screen: CourseDetailHomeworkNavigator },
QandA: { screen: QandAList },
Announcement: { screen: Announcement },
Note: { screen: CourseDetailNoteNavigator },
},
{
tabBarPosition: 'top',
swipeEnabled: true,
animationEnabled: true,
tabBarOptions: {
activeTintColor: '#000000',
inactiveTintColor: '#000000',
style: {
backgroundColor: '#e6e400',
},
labelStyle: {
textAlign: 'center',
},
indicatorStyle: {
backgroundColor: '#000',
height: 1
},
},
}
);
CourseDetailDateNavigator.js
const CourseDetailDateNavigator = createStackNavigator(
{
DateList: {
screen: DateList,
path: 'DateList',
},
DateDetail: {
screen: DateDetail,
path: 'DateDetail'
},
}, {
// TODO
// headerMode: 'none',
navigationOptions: {
title: '日期',
}
}
);
反正我能做到吗?