Question

我正在使用react-navigation 5，并且具有堆栈导航和抽屉内部导航，我想隐藏一些抽屉的导航屏幕。因此，我按照以下方式在抽屉标签属性中传递了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>

希望对您有帮助！

抽屉式导航不会隐藏屏幕

1 个答案: