反应本机导航：无法导航到堆栈中的顶部屏幕

Posted 2023-02-16

【中文标题】反应本机导航：无法导航到堆栈中的顶部屏幕

【英文标题】：React native navigation: Unable to navigate to the top screen in the stack

【发布时间】：2021-06-18 13:49:08

【问题描述】：

我当前的导航是这样的

顶层堆栈

登录屏幕 主应用程序堆栈 首页堆栈 搜索 设置选项卡堆栈 设置屏幕

我试图在设置屏幕中有一个退出按钮，按下该按钮将导航到登录屏幕

目前它给出了一个错误 任何导航器都没有处理带有有效负载 "name":"Login" 的操作“NAVIGATE”。

退出按钮代码

<View style=alignSelf: "center">
  <TouchableOpacity onPress=() =>  navigation.navigate("Login") >
    <Text>Sign Out</Text>
  </TouchableOpacity>
</View>

这就是我的顶层堆栈的样子

<NavigationContainer>  
    
      <Stack.Navigator
        initialRouteName="Login"
        screenOptions=
          headerStyle:  backgroundColor: 'white', height: ScreenHeigth * 0 ,
          headerTintColor: '#fff',
      >
          
        <Stack.Screen name="Login" component=Login options= title: '', headerLeft: null, gestureEnabled: false />
        <Stack.Screen name="Main" component=Main options= title: '', headerLeft: null, gestureEnabled: false />

      
      </Stack.Navigator>
          
    </NavigationContainer>

【参考方案1】：

您尝试过 popToTop 吗？

我在 signOut 视图中更改了一些代码 onPress 按钮

<View style= alignSelf: "center" >
   <TouchableOpacity
     onPress=() => 
     navigation.popToTop();
   
>
   <Text>Sign Out</Text>
</TouchableOpacity>

【讨论】：

它给出了一个错误The action 'POP_TO_TOP' was not handled by any navigator. 我也尝试使用navigation.dispatch(StackActions.popToTop()) 但我得到了同样的错误

我认为登录导航必须在主导航堆栈中，然后它可能会起作用，因为登录和主堆栈是不同的堆栈，所以堆栈没有得到它。

所以我无法导航到更高级别的堆栈？

你能告诉我如何在这里制作一个堆栈导航器吗？ codeshare.io/axWlzk

你也可以提供来自github的代码，这样我就可以深入研究并正确检查