React导航--当导航到嵌套堆栈时，从主堆栈中隐藏ui。

Question

当我导航到我的嵌套抽屉堆栈时，如何隐藏我的主堆栈中的UI？

目前，当我使用导航器导航到一个屏幕时，我的主堆栈的标题会显示在嵌套堆栈的标题之上。

navigation.navigate('Drawer', {screen: 'About'});

导航器时，主堆栈的页眉会显示在嵌套堆栈的页眉上方。

function DrawerStack() {
    return (
        <Drawer.Navigator>
            <Drawer.Screen name="Video Episodes" component={VideoEpisodesScreen} />
            <Drawer.Screen name="Test Yourself" component={TestYourselfScreen} />
            <Drawer.Screen name="My Results" component={MyResultsScreen} />
            <Drawer.Screen name="About" component={AboutScreen} />
            <Drawer.Screen name="Tests" component={TestsScreen} />
            <Drawer.Screen
                name="Bookmarked Videos"
                component={BookmarkedVideosScreen}
            />
        </Drawer.Navigator>
    );
}

export default function AppNavigator() {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen
                    name="Home"
                    component={HomeScreen}
                    options={stackOptions}
                />
                <Stack.Screen
                    name="Drawer"
                    component={DrawerStack}
                    options={drawerOptions}
                />
                <Stack.Screen
                    name="MyResultsScreen"
                    component={MyResultsScreen}
                    options={options}
                />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

Answer 1

你可以通过设置选项来隐藏堆栈导航头。headerShown 到假。我不知道如何 drawerOptions 的配置，但我认为你可以做这样的事情，在yout的 <Stack.Navigator>

<Stack.Screen
    name="Drawer"
    component={DrawerStack}
    options={{...drawerOptions, headerShown: false}}
/>