抽屉导航不隐藏屏幕

Question

我正在使用 react-navigation 5，我有堆栈导航和抽屉内导航，我想隐藏一些抽屉的导航屏幕。所以，我在drawerLabel属性中传递null如下

import * as React from 'react';
import {createDrawerNavigator} from '@react-navigation/drawer';
import ShowNotes from "../screens/notes/ShowNotes";

const Drawer = createDrawerNavigator();

const DrawerNavigation = () => {
    return (
        <Drawer.Navigator>
            <>
                <Drawer.Screen
                     name="Home"
                     component={ShowNotes}
                    options={{
                        headerTitle: 'All Notes',
                        drawerLabel: () => null
                    }}
                />
            </>
         </Drawer.Navigator>
   );
}
export default DrawerNavigation;

这个 DrawerNavigation 像这样在 StackNavigation 中

const Stack = createStackNavigator();
const Navigation = ({auth}) => {
return (
    <NavigationContainer theme={CustomTheme}>
        <Stack.Navigator
            screenOptions={({navigation}) => ({
                headerLeft: () => (
                    <Button
                        onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
                        title="Info"
                        color="#fff"
                    />
                ),
            })}
        >
                        <Stack.Screen
                            name="Home"
                            component={DrawerNavigation}
                        />
                        <Stack.Screen
                            name="AddNoteScreen"
                            component={AddNote}
                        />
                        <Stack.Screen
                            name="UpdateNoteScreen"
                            component={UpdateNote}
                        />
            }
        </Stack.Navigator>
    </NavigationContainer>
);
};

const mapStateToProps = state => {
    return {auth: state.auth};
};

export default connect(mapStateToProps, {})(Navigation);

我在屏幕上看到的是抽屉不包含我的屏幕，而是一个可点击的空白区域

如何停止在抽屉中显示屏幕？

干杯

Answer 1

我不知道这是否是最好的解决方案，但这对我有用。

我将不想显示的屏幕设置为 Drawer.Screen 并在 Drawer.Navigator 中设置属性 drawerContent 与我想在抽屉中显示的屏幕。看看代码

<Drawer.Navigator
        drawerContent={() => {
            return (
                <>
                    <DrawerContentScrollView>
                        {auth.isSignedIn ?
                            <Layout>
                                <Layout>
                                    <Layout style={{flexDirection: 'row', marginTop: 15, marginLeft: 10}}>
                                        <Avatar.Image
                                            source={{
                                                uri: auth.userData.picture,
                                            }}
                                            size={70}
                                        />
                                        <Layout style={{flexDirection: 'column', marginLeft: 15}}>
                                            <Title>{auth.userData.name}</Title>
                                            <Caption>{auth.userData.email}</Caption>
                                        </Layout>
                                    </Layout>

                                </Layout>
                            </Layout>
                            :
                            <>
                            </>
                        }
                    </DrawerContentScrollView>

                    <DrawerSection>
                        <DrawerItem
                            icon={({color, size}) => (
                                <Icon
                                    name="exit-to-app"
                                    color={color}
                                    size={size}
                                />
                            )}
                            label="Sign Out"
                            onPress={() => {
                                LoginManager.logOut();
                                signOut();
                            }}
                        />
                    </DrawerSection>
                </>
            );
        }}
    >
    <
            Drawer.Screen
            name="Home"
            component={ShowNotes}
            options={
                {
                    headerTitle: 'All Notes',
                }
            }
        />
        <Drawer.Screen
            name="AddNoteScreen"
            component={AddNote}
        />
        <Drawer.Screen
            name="UpdateNoteScreen"
            component={UpdateNote}
        />
    </Drawer.Navigator>

希望对你有帮助！