react-native - 一页上带有侧边菜单的基于选项卡的菜单

Question

我正在尝试将基于选项卡的菜单和侧边栏菜单放在一个页面上，以用于 react-native 应用程序。目前只显示其中一个，基于选项卡的菜单或侧边栏菜单。这是我的导航代码。我用过 wix react-native-navigation。目标是使两个菜单都在单个屏幕上工作。请帮助。

Navigation.setRoot({
  root: {
    bottomTabs: {
      id: 'BottomTabsId',
      children: [
        {
          component: {
            name: 'SignIn',
            options: {
              bottomTab: {
                fontSize: 12,
                text: 'Sign In',
                icon: require('./signin.png')
              }
            }
          },
        },
        {
          component: {
            name: 'SignUp',
            options: {
              bottomTab: {
                text: 'Sign Up',
                fontSize: 12,
                icon: require('./signup.png')
              }
            }
          },
        },
      ],
    },
    sideMenu: {
      left: {
        component: {
          name: 'reactNativeInit.SideDrawer',
          passProps: {
            side: 'left'
          }
        }
      },
      center: {
        stack: {
          id: "stack1",
          children: [
            {
              component: {
                name: 'reactNativeInit.main'
              }
            }
          ]
        }
      },
      leftButtons: [
        {
          id: 'sideMenu'
        }
      ]
    }
  }
});

Answer 1

在 RNN 中，bottomTabs 和 sideMenu 是可以组合在一起的布局。因此，不要使用 bottomTabs nav 作为主布局，而是使用 sideMenu

Navigation.setRoot({
  root: {
    sideMenu: {
      left: {
        component: {
          name: 'reactNativeInit.SideDrawer',
          passProps: {
            side: 'left'
          }
        }
      },
      center: {
        stack: {
          id: "stack1",
          children: [
            {

              bottomTabs : {
                id: "bottomTabs",

                children: [
                  {
                    component: {
                      id: 0,
                      name: "navigation.DashboardScreen",
                      options: {
                        bottomTab: {
                          text: "Dashboard",
                          icon: require("../assets/icons/icon-check.png"),
                          iconColor: "#8b8b8b",
                          selectedIconColor: "rgb(35, 128, 187)"
                        }
                      }
                    }
                  },
                  {
                    component: {
                      id: 1,
                      name: "navigation.NotificationsScreen",
                      options: {
                        bottomTab: {
                          text: "Notifications",
                          icon: require("../assets/icons/icon-check.png"),
                          iconColor: "#8b8b8b",
                          selectedIconColor: "rgb(35, 128, 187)"
                        }
                      }
                    }
                  },
                  {
                    component: {
                      id: 2,
                      name: "navigation.MessagesScreen",
                      options: {
                        bottomTab: {
                          text: "Messages",
                          icon: require("../assets/icons/icon-check.png"),
                          iconColor: "#8b8b8b",
                          selectedIconColor: "rgb(35, 128, 187)"
                        }
                      }
                    }
                  },
                  {
                    component: {
                      id: 3,
                      name: "navigation.UsersScreen",
                      options: {
                        bottomTab: {
                          text: "Contacts",
                          icon: require("../assets/icons/icon-check.png"),
                          iconColor: "#8b8b8b",
                          selectedIconColor: "rgb(35, 128, 187)"
                        }
                      }
                    }
                  }
                ]
              }
            }
          ]
        }
      }
    }
  }
});