代码之家  ›  专栏  ›  技术社区  ›  L-R

Push-to-stack仅工作一次-React Native Navigation V2

  •  0
  • L-R  · 技术社区  · 6 年前

    我第一次使用React Native Navigation v2,为一个简单的应用程序建模,该应用程序底部有3个选项卡,侧边栏有一个按钮,当按下时会导航到第四个屏幕,模仿“注销”。第四个选项卡将有一个按钮,通过返回到第一个屏幕(bottomTabs堆栈的一部分),模拟“登录”。

    我的代码有效,但只有一次。注销(将新屏幕推到堆栈)后,我可以重新登录(将该屏幕弹出堆栈)。然而,当我再次尝试注销时,我无法做到这一点。推送到堆栈的功能似乎不再起作用。

    handleLogOutPress = () => {
    Navigation.push('CenterStack', {
      component: {
        name: 'navigationApp.FourthTabScreen',
        passProps: {
          text: 'Logged Out'
        },
        options: {
          topBar: {
            visible: false
          }
        }
      }
    })
    Navigation.mergeOptions('CenterStack', {
      sideMenu: {
        left: {
          visible: false
        }
      }
    })
    }
    
    
    function handleLoginPress(){
      Navigation.pop('CenterStack')
    }
    

    这是我的堆栈最初的设置方式:

      Navigation.setRoot({
      root: {
        sideMenu: {
          left: {
            component: {
              id: 'SideMenu',
              name: 'navigationApp.SideMenu'
            }
          },
          center: {
            stack: {
              id: 'CenterStack',
              children: [
                {
                  bottomTabs: {
                    children: [
                      {
                        component: {
                          id: 'FirstTab',
                          name: 'navigationApp.FirstTabScreen',
                          passProps: {
                            text: 'Home',
                            id: 'FirstTab'
                          },
                          options: {
                            bottomTab: {
                              icon: images[0],
                              text: 'Home',
                              iconColor: 'darkblue',
                              selectedIconColor: 'lightblue'
                            },
                            topBar: {
                              visible: false
                            }
                          }
                        },
                      },
                      {
                        component: {
                          id: 'SecondTab',
                          name: 'navigationApp.SecondTabScreen',
                          passProps: {
                            text: 'Search',
                            id: 'SecondTab'
                          },
                          options: {
                            bottomTab: {
                              icon: images[1],
                              text: 'Search',
                              iconColor: 'darkblue',
                              selectedIconColor: 'lightblue'
                            },
                            topBar: {
                              visible: false
                            }
                          }
                        },
                      },
                      {
                        component: {
                          id: 'ThirdTab',
                          name: 'navigationApp.ThirdTabScreen',
                          passProps: {
                            text: 'Share',
                            id: 'ThirdTab'
                          },
                          options: {
                            bottomTab: {
                              icon: images[2],
                              text: 'Share',
                              iconColor: 'darkblue',
                              selectedIconColor: 'lightblue'
                            },
                            topBar: {
                              visible: false
                            }
                          }
                        }
                      },
                    ],
                  }
                }
              ],
            },
          }
        }
      }
    })
    

    我可能完全误解了推送/弹出的工作原理,非常感谢您的帮助和指导。

    1 回复  |  直到 6 年前
        1
  •  0
  •   L-R    6 年前

    对于任何其他正在使用 popToRoot 而不是 Pop 解决这个问题

    推荐文章