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

Question

我的屏幕是这样排列的：

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

1. 登录
2. 抽屉

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

1. 家
2. 轮廓
3. 设置

Home 是一个底部选项卡导航器，具有多个屏幕，例如

1. 仪表板
2. 提醒等...

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

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

Answer 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}

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

Answer 2

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