如何在导航栏上创建“更多”按钮？答案

【问题标题】：How can I create a 'More' button on my navigation bar?如何在导航栏上创建“更多”按钮？
【发布时间】：2022-10-24 07:01:07
【问题描述】：

我已经创建了我的 React Native 应用程序，并且正在使用 React Navigation 创建一个 Tab Navigator，它看起来像这样：

const MainTabs = () => {
  const Tab = createMaterialBottomTabNavigator();
  return (
    <Tab.Navigator initialRouteName="Home">
    <Tab.Screen
      name='Home'
      component={Home}
      options={{
        tabBarIcon: IconHome,
      }}
    />
    <Tab.Screen
      name='Screen 2'
      component={Screen2}
      options={{
        tabBarIcon: Icon2,
      }}
    />
  </Tab.Navigator>
)}

export default MainTabs;

现在我想添加第三个图标，称为“更多”，单击它会打开一个带有更多选项的侧边菜单。我已经添加了按钮，但我不知道如何添加另一个菜单 - 我使用 createNavigatorFactory 创建了一个名为 MoreMenu 的菜单，它显示在屏幕的一侧，但我无法得到它与底部菜单同时显示。

我尝试这样做（只是一直显示 MoreMenu；稍后我将添加显示/隐藏部分）：

const MainTabs = () => {
  const Tab = createMaterialBottomTabNavigator();
  return (
    <>
      <MoreMenu />
      <Tab.Navigator initialRouteName="Home">
        <Tab.Screen
          name='Home'
          component={Home}
          options={{
            tabBarIcon: IconHome,
          }}
        />
       ...
      </Tab.Navigator>
    </>
  )
}

export default MainTabs;

但是当我运行它时，我得到了错误：

错误：已为此容器注册了另一个导航器。你可能在单个“NavigationContainer”下有多个导航器或“屏幕”。确保每个导航器都位于单独的“屏幕”容器下。

它还提供了指向嵌套导航器文档的链接，但我不认为我的导航器是嵌套的——据我所知，它们是兄弟姐妹。

我不确定如何实现我想要的。部分问题是我不确定“屏幕”容器是什么意思，所以我不知道如何确保我有单独的容器。

编辑添加： MoreMenu 看起来像这样：
const MoreMenu = () => {
      const Tab = createSideTabNavigator();
      return (
        <Tab.Navigator initialRouteName="More1">
        <Tab.Screen
          name='More 1'
          component={More1}
          options={{
            tabBarIcon: IconMore1,
          }}
        />
        <Tab.Screen
          name='More 2'
          component={More2}
          options={{
            tabBarIcon: IconMore2,
          }}
        />
      </Tab.Navigator>
    )}
    
    export default MoreMenu;

【问题讨论】：

可以添加<MoreMenu />的代码吗？
谢谢。我已经在上面添加了。它与 MainTabs 基本相同，具有不同的屏幕。

标签： react-navigation

【解决方案1】：

您可以使用 react-native-tab-view 模块中指定的 <TabView> 将其嵌入到 <MoreMenu> 菜单中

return ( 
    <TabView>
        <MoreMenu />
    </TabView>
   )
}

我们还可以看到如何以这种方式定义一个renderScene 变量作为组件中的浏览器。

const renderScene = ({ route }) => {
  switch (route.key) {
    case 'Menu':
      return <MenuRoute />;
    case 'albums':
      return <TabsRoute />;
  }
};

结论是我建议阅读this post 和custom tab bar 的例子

【讨论】：