Wix React Native Navigation v2：如何结合BottomTabs实现侧边菜单？

嘿，我来帮你理清这个问题～答案很明确：你应该在startTabs函数里修改实现，原因很简单——这个函数就是你登录后用来替换根导航结构的入口，直接在这里把原来的底部标签栏嵌套进侧边菜单的结构里，逻辑最顺畅也最直接。

具体修改方法 #

首先你得先准备好侧边菜单对应的屏幕组件（比如取名SideMenuScreen，记得提前在导航系统里注册好这个组件），然后调整Navigation.setRoot的结构，把原来的bottomTabs放到sideMenu的center区域（也就是主内容区），再添加left区域作为侧边菜单：

const startTabs = () => {
  Promise.all([
    Icon.getImageSource("md-map", 30),
    Icon.getImageSource("ios-share-alt", 30)
  ]).then(sources => {
    Navigation.setRoot({
      root: {
        sideMenu: { // 改用sideMenu作为根导航结构
          left: { // 左侧边栏的配置项
            component: {
              name: "navigation.playground.SideMenuScreen", // 你的侧边菜单组件名称
              options: {
                sideMenu: {
                  width: 280, // 可自定义侧边栏宽度
                  enabled: true
                }
              }
            }
          },
          center: { // 原来的底部标签栏作为主内容展示区
            bottomTabs: {
              children: [
                {
                  stack: {
                    children: [{
                      component: {
                        name: "navigation.playground.FindPlaceScreen",
                        options: {
                          bottomTab: { text: "Find Place", icon: sources[0] },
                          topBar: { visible: true, title: { text: "Find Place" } }
                        }
                      }
                    }]
                  }
                },
                {
                  stack: {
                    children: [{
                      component: {
                        name: "navigation.playground.SharePlaceScreen",
                        options: {
                          bottomTab: { text: "Share Place", icon: sources[1] },
                          topBar: { visible: true, title: { text: "Share Place" } }
                        }
                      }
                    }]
                  }
                }
              ]
            }
          }
        }
      }
    });
  });
};

额外小提示 #

为了让用户能触发侧边菜单，你可以在主屏幕的顶部栏添加一个菜单按钮，比如在FindPlaceScreen的topBar选项里加上：

topBar: {
  visible: true,
  title: { text: "Find Place" },
  leftButtons: [
    {
      id: "menuToggle",
      icon: await Icon.getImageSource("md-menu", 30) // 用你喜欢的菜单图标
    }
  ]
}

然后在组件里监听这个按钮的点击事件，调用Navigation.toggleDrawer({ side: 'left' })就能展开/收起侧边菜单啦～

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