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

Posted 2023-02-16

【中文标题】React Native Navigation v2 sideMenu 无法导航到屏幕

【英文标题】：React Native Navigation v2 sideMenu not able to navigate to screen

【发布时间】：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',
  
)

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

【参考方案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",
                                        ,
                                    ,
                                ,
                            ,
                        ],
                    ,
                ,
            ,
        ,
    );

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

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

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