在 React Native 上使用 DrawerNavigator 和堆栈导航

Question

我目前在我的应用程序上使用堆栈导航，但我想向其添加抽屉菜单。当我尝试添加时，我的应用程序上的当前导航容器出现冲突问题。

我应该把抽屉放在哪里？在我的 App.tsx 上，在我的 routes.ts 上？或者像组件一样使用它？

这是我的 app.tsx:

export default function App() {
    const [fontsLoaded] = useFonts({
        Comfortaa_300Light,
        Comfortaa_400Regular,
        Comfortaa_500Medium,
        Comfortaa_600SemiBold,
        Comfortaa_700Bold,
    });

    if (!fontsLoaded) {
        return null;
    }
    return (
        <Routes/>
    );
}

我是这样插入抽屉的：

export default function App() {
    const [fontsLoaded] = useFonts({
        Comfortaa_300Light,
        Comfortaa_400Regular,
        Comfortaa_500Medium,
        Comfortaa_600SemiBold,
        Comfortaa_700Bold,
    });

    if (!fontsLoaded) {
        return null;
    }
    const Drawer = createDrawerNavigator();
    function CustomDrawerContent(props) {
        return (
            <DrawerContentScrollView {...props}>
                <DrawerItemList {...props} />
                <DrawerItem
                    label="Close drawer"
                    onPress={() => props.navigation.closeDrawer()}
                />
                <DrawerItem
                    label="Toggle drawer"
                    onPress={() => props.navigation.toggleDrawer()}
                />
            </DrawerContentScrollView>
        );
    }
    function MyDrawer() {
        const Drawer = createDrawerNavigator();

        return (
            <Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} />}>
                <Drawer.Screen name="Home" component={Welcome}/>
                <Drawer.Screen name="Map" component={IncidentsMap}/>
                <Drawer.Screen name="CreateIncident" component={SelectIncidentLocation}/>
            </Drawer.Navigator>
        );
    }

    return (
        /*<Routes/>*/

        <NavigationContainer>
            <MyDrawer/>
        </NavigationContainer>
    );
}

这是我的路线文件：

export default function Routes() {
    return(
        <NavigationContainer>
            <Navigator screenOptions={{headerShown: false}}>
                {/*<Screen name="GetLocationTest" component={GetLocationTest}/>*/}
                <Screen name="WelcomePage" component={WelcomePage}/>
                <Screen name="WelcomePageStep2" component={WelcomePageStep2}/>
                <Screen name="IncidentsMap" component={IncidentsMap}/>
                <Screen name="IncidentDetails"
                        component={IncidentDetails}
                        options={{
                            headerShown: true,
                            header: () => <Header showCancel={false} title="Incidente"/>
                        }}
                />
                <Screen name="SelectIncidentLocation" component={SelectIncidentLocation}
                        options={{
                            headerShown: true,
                            header: () => <Header title="Selecione no Mapa" showCancel={false}/>
                        }}
                />
                <Screen name="IncidentData" component={IncidentData}/>
            </Navigator>
        </NavigationContainer>
    )
}

我设法在我的 App.tsx 中插入了抽屉，但是当我尝试在按钮中使用导航时我遇到了一些冲突，我收到了 The action 'NAVIGATE' with payload was not handled by any navigator.。有没有一种方法可以让我插入抽屉菜单并仍然能够使用我当前的导航系统？

Answer 1

您可以在抽屉导航器旁边添加堆栈导航器

Route.js

export default function Routes() {
return(
        <NavigationContainer>
           <Navigator screenOptions={{headerShown: false}}>
             <Screen name={'MyDrawer'} component={MyDrawer}/>
             //rest of your routes
           </Navgator>
        </NavigationContainer>
}

导航到您的抽屉

navigation.navigate('MyDrawer')

在 React Native 上使用 DrawerNavigator 和堆栈导航

Using DrawerNavigator alongside stack navigation on react native

drawer

typescript

react-native

react-navigation-drawer

react-typescript