navigation.goBack() 在嵌套导航中不起作用

Posted 2023-02-21

【中文标题】navigation.goBack() 在嵌套导航中不起作用

【英文标题】：navigation.goBack() not working in nested navigation

【发布时间】：2021-11-12 01:40:01

【问题描述】：

我的屏幕是这样排列的：

主根 堆栈导航器有 2 个屏幕

登录 抽屉

抽屉是一个抽屉导航器，有三个屏幕

首页 简介 设置

Home 是一个底部标签导航器，具有多个屏幕，例如

仪表板 提醒 等等……

所以问题是，每当我在提醒的任何子屏幕中并且我想通过 navigation.goBack() 将其关闭时，它都会将我带到仪表板，我想要的是回到提醒

PS。子屏幕也在标签导航器中我用过滤器隐藏了它

【参考方案1】：

阅读以下代码并尝试一下，不要忘记导入它。 我这样做的方法是将上面的抽屉放在文件中 DrawerNavigator.js：

const Drawer = createDrawerNavigator()

const DrawerNavigator = () => 
    return(
      <Drawer.Navigator initialRouteName='TabNavigator'>
        <Drawer.Screen name='Home' component=TabNavigator/>
        <Drawer.Screen name='Profile' component=ProfileStackScreen/> 
        <Drawer.Screen name='Settings' component=SettingsStackScreen/>
      </Drawer.Navigator>
    )


export default DrawerNavigator

在这里我插入 TabNavigator（抽屉中只有一个选项将具有底部选项卡导航器，即 Home 之一。 TabNavigator.js 将包含所有底部标签屏幕：

const Tab = createBottomTabNavigator();

const BottomTabNavigator = () => 
    return (
        <Tab.Navigator initialRouteName='Dashboard'>
                <Tab.Screen name="Dashboard" component=DashboarStackScreen />
                <Tab.Screen name='Reminder' component=ReminderStackScreen/>
          </Tab.Navigator>
    )


export default BottomTabNavigator

在 StackNavigator.js 中，您将输入您可能想要使用的每个堆栈屏幕：

const Stack = createStackNavigator()

const DashboardStackScreen = () => 

  return (
    <Stack.Navigator >
    /*INSERT STACK SCREENS HERE*/
    </Stack.Navigator>
  )



const ReminderStackScreen = () => 
  return (
    <Stack.Navigator  >
    /*INSERT STACK SCREENS HERE*/
    </Stack.Navigator>
  )



const ProfileStackScreen = () => 
  return(
    <Stack.Navigator  >
      /*INSERT STACK SCREENS HERE*/
    </Stack.Navigator>
    
  )


const SettingsStackScreen = () => 
  return(
    <Stack.Navigator >
      /*INSERT STACK SCREENS HERE*/
    </Stack.Navigator>
  )


export DashboardStackScreen,ReminderStackScreen,ProfileStackScreen,SettingsStackScreen

如果这不能解决您的问题，请告诉我。

【参考方案2】：

您可以为 BottomTabNavigator 的每个选项卡使用 StackNavigator，其中包含该选项卡的屏幕。然后每个选项卡都有自己的导航堆栈。

【讨论】：

你能分享一个我非常感激的例子吗

React Navigation 的文档非常好，他们有一个 tabNavigator 的示例，其中包含嵌套的 stackNavigators here。