React Native抽屉导航点击无响应问题求助

你的核心问题是抽屉导航的结构完全错误：每个抽屉选项都绑定了整个StackNavigator组件，点击时只是重复渲染同一个Stack容器，自然不会触发页面跳转。

一、正确的导航嵌套结构（适配你的需求） #

你需要的是「登录进入主购物页后，可通过抽屉菜单跳转到指定页面」，正确的层级应该是：

1. 最外层：NavigationContainer
2. 中间层：DrawerNavigator，包含两个类型的屏幕：
   • 主Stack导航（处理登录流程：PasswordVerify → HomeShopping）
   • 各个抽屉目标页面（Profile、MyListings等）
3. 在HomeShopping页面添加打开抽屉的触发按钮

二、具体代码修复 #

1. 重构StackNavigator（聚焦登录与主购物流程） #

// StackNavigator.js
import PasswordVerify from '../screens/PasswordVerify';
import HomeShopping from '../screens/HomeShopping';
import StorePage from '../screens/StorePage';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

const MainStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="PasswordVerify" component={PasswordVerify} />
      <Stack.Screen name="HomeShopping" component={HomeShopping} />
      <Stack.Screen name="StorePage" component={StorePage} />
    </Stack.Navigator>
  );
};

export default MainStack;

2. 修复DrawerMenu（正确绑定抽屉页面） #

// DrawerMenu.js
import { createDrawerNavigator } from '@react-navigation/drawer';
import MainStack from './StackNavigator';
// 直接导入抽屉目标页面
import ProfileScreen from '../screens/DrawerScreens/ProfileScreen';
import MyListingsScreen from '../screens/DrawerScreens/MyListingsScreen';
import SellerDashBoardScreen from '../screens/DrawerScreens/SellerDashBoardScreen';

const Drawer = createDrawerNavigator();

const DrawerMenu = () => {
  return (
    <Drawer.Navigator screenOptions={{headerShown: false}}>
      {/* 主Stack作为抽屉的默认入口 */}
      <Drawer.Screen name="Home" component={MainStack} />
      {/* 每个抽屉选项对应单独的页面 */}
      <Drawer.Screen name="Profile" component={ProfileScreen} />
      <Drawer.Screen name="MyListings" component={MyListingsScreen} />
      <Drawer.Screen name="SellerDashboard" component={SellerDashBoardScreen} />
    </Drawer.Navigator>
  );
};

export default DrawerMenu;

3. 在HomeShopping添加抽屉触发按钮 #

// HomeShopping.js
import { View, TouchableOpacity, Text } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const HomeShopping = () => {
  const navigation = useNavigation();

  return (
    <View style={{padding: 20}}>
      {/* 左上角汉堡按钮，点击打开抽屉 */}
      <TouchableOpacity onPress={() => navigation.openDrawer()}>
        <Text style={{fontSize: 24}}>☰</Text>
      </TouchableOpacity>
      {/* 你的主购物页面内容 */}
      <Text>主购物页面</Text>
    </View>
  );
};

export default HomeShopping;

三、额外排查点 #

• 检查是否完整安装依赖：确保已安装@react-navigation/drawer和原生依赖（iOS执行pod install，Android按文档配置MainActivity）
• 修复代码语法错误：你的原DrawerMenu代码缺少闭合标签（</Drawer.Navigator>），这会导致渲染异常
• 确认页面组件正确导出：所有屏幕组件都需通过export default导出

内容的提问来源于stack exchange，提问作者Justin Eastin