嵌套的React导航Stacknavigator-显示目标标题栏

时间:2019-06-08 05:32:52

标签: react-native react-navigation

我在我的react本机项目中使用react导航并应用嵌套的stacknavigator。从Google上,我可以看到人们禁止显示2个标题,他们会在headerMode = 'none'内部设置stacknavigator

现在,我的情况是这样的: enter image description here enter image description here

下面是导航代码。

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: '日期',
        }
    }
);

反正我能做到吗?

0 个答案:

没有答案