不可能在同一屏幕上有两个菜单

Question

目标

我正在尝试实现一个看起来像这样的屏幕。有两个菜单，一个是由createDrawerNavigatorreact-navigation（左上角）创建的汉堡菜单。另一个菜单是由创建的底部按钮createBottomTabNavigator。

是的，有两个菜单并不是一个好的用户界面选择，但这是我公司的选择。此外，这些菜单至少共享一个条目（主页）。

我尝试了什么

这个 stackoverflow非常接近期待的结果，但我不知道如何显示汉堡菜单，而不是像帖子那样显示简单的视图。

我尝试了多种层次结构，但没有成功地实现目标。

所以我没有主意，决定自己完成底部菜单。它似乎运行良好，但某些路线未定义，因此我无法导航到它们（例如屏幕上的购物车和搜索）

看来反应导航使用其组件来定义路线。

问题

如何将路线添加到导航系统以便能够导航到它们？

我试过 ：

• 指定一个初始状态<NavigationContainer>但它似乎不起作用。

• 创建了一个自定义路由器来覆盖该方法，但之后getInitialState我不知道如何使用我的自定义路由器！

任何帮助将不胜感激

编辑：

导航代码

// src/menu/burger/drawer.js
import { createDrawerNavigator } from '@react-navigation/drawer';
import { useTranslation } from 'react-i18next';
import Ionicons from '@expo/vector-icons/Ionicons';
import React from 'react';

import Account from '../../pages/account';
import Brands from '../../pages/brands';
import Cart from '../../pages/cart';
import Homepage from '../../pages/homepage';
import {
  ACCOUNT,
  BRANDS,
  CART,
  HOMEPAGE,
} from '../../pages/pageIdentifiers';

const Drawer = createDrawerNavigator();
const renderMenuIcon = (iconName, size, focused) => (
  <Ionicons
    name={iconName}
    size={size}
    color={focused ? '#7cc' : '#ccc'}
  />
);

// This component render the items of the burger menu displayed in the top left corner
export default function MenuDrawer() {
  const { t } = useTranslation();

  return (
    <Drawer.Navigator
      initialRouteName={HOMEPAGE}
    >
      <Drawer.Screen
        name={HOMEPAGE}
        component={Homepage}
        options={{
          title: t('menu.item.homepage'),
          drawerIcon: ({ focused, size }) => renderMenuIcon('md-home', size, focused),
        }}
      />
      <Drawer.Screen
        name={CART}
        component={Cart}
        options={{
          title: t('menu.item.cart'),
          drawerIcon: ({ focused, size }) => renderMenuIcon('cart-outline', size, focused),
        }}
      />
      <Drawer.Screen
        name={ACCOUNT}
        component={Account}
        options={{
          title: t('menu.item.account'),
          drawerIcon: ({ focused, size }) => renderMenuIcon('person-outline', size, focused),
        }}
      />
      <Drawer.Screen
        name={BRANDS}
        component={Brands}
        options={{
          title: t('menu.item.brands'),
          drawerIcon: ({ focused, size }) => renderMenuIcon('basket-outline', size, focused),
        }}
      />
    </Drawer.Navigator>
  );
}


// App.js
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <MenuDrawer />
        <BottomTabsMenu />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// src/menu/bottomTabs/drawer.js
// We can't use 2 menus with 2 differents navigators on the same view.
// So let's handle the click on tabs ourselves
export default function BottomTabsMenu() {
  const [activeTab, setActiveTab] = useState(HOMEPAGE);
  const navigation = useNavigation();
  // useEffect(() => {
  //   const subscription = navigation.addListener('focus', (data) =>  {
  //     console.log(data);
  //   });
  //   return subscription;
  // }, [navigation]);
  
  // This function crash when the route id is not known by react-navigation, well logic
  const onMenuPress = (id) => {
    navigation.navigate(id);
    setActiveTab(id);
  };

  return (
    <View style={styles.container}>
      {bottomMenuItems.map(
        (menuItem) => (
          <View
            key={`view-${menuItem.id}`}
            style={styles.item}
          >
            <MenuItem
              key={`menu-${menuItem.id}`}
              isFocus={menuItem.id === activeTab}
              onPress={(id) => onMenuPress(id)}
              configuration={menuItem}
            />
          </View>
        )
      )}
    </View>
  );
}

Answer 1

https://snack.expo.dev/BsCtDUFoM（最小化）
https://snack.expo.dev/Zgn9M59H7（完整/og）

网络：当您导航时，两个导航器/菜单都完美同步

（编辑：让它在 android 和 ios 上完美运行）

代码真的很乱，但我不知道如何清理它