按下后退键返回到上一个选项卡

Question

我使用下面的结构来组织我的屏幕

有一个底部选项卡导航器显示两个屏幕:Jobs和Notification。Jobs屏幕是一个堆栈导航器，它有两个屏幕:Job用于显示作业列表，JobDetail用于显示作业的详细信息。当点击通知时，我需要导航到相应的JobDetail屏幕。

我的问题是:是否有一种方法可以返回到Notification选项卡通过按后退按钮从JobDetail屏幕，鉴于我导航到JobDetail屏幕通过点击其中一个通知放在首位?目前，当我点击JobDetail屏幕上的后退按钮时，它会带我回到Job屏幕，而不是我想让它回到Notification屏幕。

我还在这里包含了一个工作演示:https://snack.expo.dev/@atosh502/go- to- back- tab-example

Answer 1

更新答案:

正如这个答案所述，您必须将backBehaviorprop添加到选项卡导航器中。

<Tab.Navigator
...
backBehavior={'history'}
>
// ...
</Tab.Navigator>

查看文档获取更多信息。

---

老答:

这似乎是@react-navigation/native: ^6.x回到版本5的一个问题。X可以解决这个问题。只使用

npm install @react-navigation/native@5.9.8;  

Answer 2

以下是所做的更改，希望它也适用于您:

const Tabs = () => {
return (
<Tab.Navigator>
<Tab.Screen
name="Job"
component={Job} //remove JobStack and keep just Job screen
/>
<Tab.Screen
name="Notification"
component={NotificationStack} //keep NotificationStack instead of page so you'll get back to that page
/>
</Tab.Navigator>
)
}
// remove/comment your JobStack screen    
// const JobStack = () => {
//   return (
//     <Stack.Navigator>
//       <Stack.Screen name="Job" component={Job} />
//       <Stack.Screen name="JobDetail" component={JobDetail} />
//     </Stack.Navigator>
//   )
// }
//Add this NotificationStack screen
const NotificationStack = () => {
return (
<Stack.Navigator>
<Stack.Screen name="Notification" component={Notification}/>
<Stack.Screen name="Jobs" component={JobDetail} options={{title: 'Notification'}}/>
</Stack.Navigator>
)
}

请在这里查看这个工作演示:点击这里