导航和抽屉导航React Native

Question

所以我已经有了一个导航系统，并且希望在用户登录后从主购物页面开始添加特定导航的抽屉菜单。我遇到的问题是，在网上遵循了一些关于如何拥有不同类型的多个导航的指导之后，抽屉按钮在点击时根本不会起任何作用。任何见解或帮助都将不胜感激。

我在app.js文件上有NavigationContainer，其中包含DrawerMenu文件，我通过该文件导入了主StackNavigator文件。

主StackNavigator文件

// Main Nav
import PasswordVerify from '../screens/PasswordVerify';
import HomeShopping from '../screens/HomeShopping';
import StorePage from '../screens/StorePage';
// Drawer Screens
import ProfileScreen from '../screens/DrawerScreens/ProfileScreen';
import MyListingsScreen from '../screens/DrawerScreens/MyListingsScreen';
import SellerDashBoardScreen from '../screens/DrawerScreens/SellerDashBoardScreen';

const Stack = createNativeStackNavigator();
const Navigation = () => {
return (
<Stack.Navigator>
<Stack.Screen name="PasswordVerify" component={PasswordVerify} />
<Stack.Screen name="HomeShopping" component={HomeShopping} />
<Stack.Screen name="StorePage" component={StorePage} />
{/* Drawer Screens */}
<Stack.Screen name="ProfileIndex" component={ProfileScreen} />
<Stack.Screen name="MyListingsIndex" component={MyListingsScreen} />
<Stack.Screen name="SellerDashboardIndex" component={SellerDashBoardScreen} />
</Stack.Navigator>

抽屉菜单文件

import { createDrawerNavigator } from '@react-navigation/drawer';
import Navigation from './StackNavigator';
const Drawer = createDrawerNavigator();
const DrawerMenu = () => {
return (
<Drawer.Navigator screenOptions={{headerShown: false}}>
<Drawer.Screen name="Profile" component={Navigation} />
<Drawer.Screen name="MyListings" component={Navigation} />
<Drawer.Screen name="SellerDashboard" component={Navigation} />

这正是我从指南中解读的，我阅读并尽我所能，他们有工作示例，除了当我拉出抽屉菜单时，点击那里的名称什么都不会做之外，一切都匹配。

再次感谢您的时间和帮助。

尝试在我的react原生应用程序中实现抽屉导航，而我已经为所有非抽屉链接设置了另一个主导航。结果抽屉上的链接根本没有响应。

Answer 1

我会理解你的想法如下：

• 您有3个屏幕：PasswordVerify、HomeShopping、StorePage
• 您有一个有3个屏幕的抽屉：ProfileScreen、MyListingsScreen、SellerDashBoardScreen
• 您希望从PasswordVerify(或HomeShopping或StorePage(重定向到Drawer
• 你想重定向后，你可以看到你的抽屉，并可以按下(或滑动(显示抽屉菜单

我对你的情况有一个想法：

• 定义抽屉
• 像堆叠一样使用抽屉(已定义(
• 导入堆叠中的抽屉。导航器

这是代码：

const Drawer = createDrawerNavigator();
const DrawerNav = () => {
return (
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="ProfileScreen" component={ProfileScreen} />
<Drawer.Screen name="MyListingsScreen" component={MyListingsScreen} />
<Drawer.Screen name="SellerDashBoardScreen" component={SellerDashBoardScreen} />
</Drawer.Navigator>
);
};
const Stack = createNativeStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="PasswordVerify" component={PasswordVerify} />
<Stack.Screen name="HomeShopping" component={HomeShopping} />
<Stack.Screen name="StorePage" component={StorePage} />
<Stack.Screen name="DrawerNav" component={DrawerNav} />
</Stack.Navigator>
</NavigationContainer>
);
}