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设置为false来隐藏堆栈导航标题。我不确定drawerOptions的配置方式，但我认为您可以在<Stack.Navigator>

中做类似的事情

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

反应导航-导航到嵌套堆栈时从主堆栈隐藏ui

1 个答案: