React Native中头部汉堡菜单点击无法激活Drawer Navigator问题

• 你定义的Root抽屉组件未挂载到全局导航树中：当前App的根导航是底部Tab导航，抽屉实例根本没有被渲染，自然无法触发打开操作
• 汉堡按钮的onPress绑定逻辑错误：你直接绑定了组件Root，而点击事件需要的是执行打开抽屉的方法，传入组件不会产生任何响应

你只需要调整导航层级，把底部Tab导航整体包裹到抽屉导航中，再修改按钮点击逻辑即可，不需要改动原有页面的标题逻辑：

1. 修改App.js，把抽屉作为全局根导航 #

首先导入抽屉导航创建方法，将原有Tab导航作为抽屉的默认页面：

// 新增导入
import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();

// 原有Tab导航封装成单独组件
function TabNavigator() {
  const primaryColor = Colors.primaryColor;
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;
          if (route.name === 'All') {
            iconName = focused ? 'ios-restaurant' : 'ios-restaurant-outline';
          } else if (route.name === 'Favorites') {
            iconName = focused ? 'ios-heart' : 'ios-heart-outline';
          }
          return <Ionicons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: primaryColor,
        tabBarInactiveTintColor: 'gray',
        headerShown: false,
      })}
    >
      <Tab.Screen name="All" component={CategoryNavigator} />
      <Tab.Screen name="Favorites" component={FavoriteNavigator} />
    </Tab.Navigator>
  )
}

// 修改App组件的返回内容
export default function App() {
  const [fontLoaded, setFontLoaded] = useState(false);

  if (!fontLoaded) {
    return (
      <AppLoading
        startAsync={fetchFonts}
        onFinish={() => setFontLoaded(true)}
        onError={(err) => console.log(err)}
      />
    );
  }

  return (
    <NavigationContainer>
      <Drawer.Navigator screenOptions={{headerShown: false}}>
        {/* 把Tab导航作为抽屉的默认页面 */}
        <Drawer.Screen name="Home" component={TabNavigator} />
        {/* 你可以在这里添加更多抽屉菜单项，比如设置、关于等 */}
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

2. 修改CategoryNavigator的按钮点击逻辑 #

删除你原来定义的没用的Root函数，把汉堡按钮的onPress改为调用导航自带的打开抽屉方法：

// 删掉原来的Drawer定义和Root函数，只保留Stack相关逻辑
const Stack = createNativeStackNavigator();

const CategoryNavigator = (props) => {
  const { navigation } = props;
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: Platform.OS === 'android' ? Colors.primaryColor : '',
        },
        headerTintColor:
          Platform.OS === 'android' ? 'white' : Colors.primaryColor,
        headerLeft: () => (
          <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
            {/* 这里修改onPress逻辑 */}
            <Item title="Menu" iconName="ios-menu" onPress={() => navigation.openDrawer()} />
          </HeaderButtons>
        ),
        headerBackVisible: true,
        headerBackTitle: '',
      }}
    >
      {/* 原有Stack.Screen内容不变 */}
      <Stack.Screen
        name="Categories"
        component={CategoriesScreen}
        options={{ title: 'Categories' }}
      />
      <Stack.Screen
        name="CategoryMeals"
        component={CategoryMealsScreen}
        options={{ title: 'Category Meals' }}
      />
      <Stack.Screen
        name="MealDetail"
        component={MealDetailScreen}
        options={{ title: ' ' }}
      />
    </Stack.Navigator>
  );
};

export default CategoryNavigator;

3. 同步修改FavoriteNavigator的头部配置（可选） #

如果你需要在收藏页面也展示汉堡菜单，只要在FavoriteNavigator的Stack配置里加上同样的headerLeft配置即可。

修改完之后就可以实现你要的效果：所有页面头部保留随页面变化的标题，同时点击汉堡按钮可以正常打开侧边抽屉，原有底部Tab导航的逻辑完全不受影响。

内容的提问来源于stack exchange，提问作者shashikant burnwal