Меню на основе вкладок с боковым меню на одной странице

Question

Я пытаюсь разместить на одной странице меню, основанное на вкладках, и меню боковой панели для приложения с естественной реакцией. На данный момент отображается только один из них: меню на основе вкладок или боковое меню. Вот мой навигационный код. Я использовал wix response-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)"
                        }
                      }
                    }
                  }
                ]
              }
            }
          ]
        }
      }
    }
  }
});