React Native Navigation v2 sideMenu 无法导航到屏幕答案

【问题标题】：React Native Navigation v2 sideMenu not able to navigate to screenReact Native Navigation v2 sideMenu 无法导航到屏幕
【发布时间】：2019-01-29 13:55:50
【问题描述】：

我正在尝试从 sideMenu 调用 Navigate.push，但没有任何反应。

Navigation.setRoot({
    root: {
      sideMenu: {
        left: {
          component: {
            name: 'app.SideMenu',
          },
          children: [
           {
             stack: {
             children: [
                {
                  component: {
                    name: TERMS_SCREEN.id,
                  }
                },
             ]
           }
        }
      ]
        },
        center: {
          bottomTabs: {
            id: 'BottomTabsId',
            options: {
              topbar: {
                visible: true,
              }
            },
            children: [
              {
                stack: {
                  id: 'Tabs',
                  children: [
                    {

..我正在尝试像这样在 sideMenu 中推送一个屏幕

console.log(this.props.componentId);
Navigation.push(this.props.componentId, {
  component: {
    name: 'app.Terms',
  }
})

我正在获取日志，但没有任何反应。我很肯定我需要对我的布局做一些事情，但我没有在文档中看到示例或解释。

【问题讨论】：

标签： react-native react-native-navigation

【解决方案1】：

您在菜单中构建组件的方式有问题。问题是您必须有一个堆栈才能推送其他屏幕，并且从外观上看 - 您的侧菜单屏幕并非如此。

这是设置left sideMenu 组件的方式，它是stack；一旦你这样做了，你就可以像使用 Navigation.push(this.props.componentId... 一样推送屏幕：

left: {
  stack: {
    children: [
      {
        component: {
          name: 'app.SideMenu',
        }
      }
    ]
  }
}

【讨论】：

【解决方案2】：

我做错了实际上是因为我传递了sidemenu componentId，而实际上我需要传递当前选项卡的id。像这样。

    Navigation.push(`Tab${this.props.activeTabIndex + 1}`,{
        component: {
            name: Screens.ACCOUNTS,
        }
      }
    )

sidemenu布局也是这样

root: {
  sideMenu: {
    id: 'SideMenu',
    left: {
      component: {
        id: 'SideMenu.left',
        name: Screens.SIDEMENU,
      }
    },

【讨论】：

【解决方案3】：

虽然在 sidemenu 对象中有 children 和 stack 可能是一种解决方案。但你也可以这样做。考虑关注

Navigation.setRoot({
        root: {
            sideMenu: {
                left: {
                    id: "AppSideMenu",
                    component: {
                        id: "HomeScreenDrawer",
                        name: "YO.HomeScreen.Drawer",
                    },
                },
                center: {
                    stack: {
                        id: "AppHomeStack",
                        children: [
                            {
                                component: {
                                    id: "AppHomeScreen",
                                    name: "YO.HomeScreen",
                                    options: {
                                        topBar: {
                                            visible: false,
                                            drawBehind: true,
                                            height: 0,
                                        },
                                        statusBar: {
                                            style: "light",
                                        },
                                    },
                                },
                            },
                        ],
                    },
                },
            },
        },
    });

这样，当您要推送时，只需调用位于 center{stack:{}} 下的主堆栈的 ID，ID 为 AppHomeStack

现在在应用程序的任何地方，这都可以解决问题

Navigation.push("AppHomeStack", {
    component: {
    name: "YO.UserScreen",
    },
});

【讨论】：