ящик-навигация не скрывает экран - PullRequest
Новая
       12

ящик-навигация не скрывает экран

0 голосов
/ 25 мая 2020

Я использую реакцию-навигацию 5, и у меня есть навигация по стеку и внутренняя навигация по ящику, я хочу скрыть некоторые из экранов навигации по ящику. Итак, я передаю значение null в атрибуте drawerLabel следующим образом: 

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);

Я вижу на своем экране ящик, не содержащий моих экран, но пустая пустая область, на которую можно щелкнуть

enter image description here

Как я могу остановить отображение экрана в ящике?

Ура

1 Ответ

0 голосов
/ 28 мая 2020

Я не знаю, лучшее ли это решение, но оно работает для меня.

Я установил экраны, которые не хочу отображать, как 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>

Надеюсь, это поможет!

...