Expo Router - 当使用 router.push() 到不同选项卡中的屏幕时,无法返回推送的根目录

问题描述 投票:0回答:1

场景:

  • 导航到特定路线的组件
  • 该组件用于多个屏幕
  • 该组件用于不在其将路由推送到的选项卡堆栈中的屏幕上
const Component = () => {
  ...
  return (
    <Pressable
       ...
       onPress={() => router.push('[otherTab]/[screenWithinOtherTabStack]')}
    >
    ...
}
  • 导航到新屏幕后,标题中会出现后退按钮
...OtherTabNavigator()

 return(
    <Stack
      ...
      screenOptions={{
        ...
        headerLeft={() => (
          <Pressable
            onPress={() => router.back()}
            ...
          >
            ...
  • router.back()
    将导航到
    [otherTab]
    而不是它源自的选项卡/屏幕

推送的路由似乎丢失了路由上的任何状态。

我尝试使用

useNavigation()
从当前路径获取密钥,然后导航到
'[otherTab]/[screenWithinOtherTabStack]'
将密钥作为参数传递,但我无法使用该密钥导航回推送源自的特定屏幕路由。

如果有人对已成功处理的此类情况有任何见解,我们将不胜感激。

react-native expo react-navigation react-navigation-stack expo-router
1个回答
0
投票

每个导航器都保留自己的导航历史记录嵌套导航器所以我所做的是将共享导航逻辑集中在外部导航器中。这样,您就可以轻松地从任何选项卡导航到所需的屏幕。

示例:

假设您有一个类似

(tabs)/post/[edit].tsx
的屏幕,您想从其他选项卡访问它。相反,请将其在项目结构中向上移动。现在,您可以使用像
router.push(edit/${postId})
这样的统一路线导航到此屏幕,并跟踪历史记录的变化。

路由器结构

app
|-- (tabs)
|   |-- post
|   |-- comments
|   |-- ...
|-- post
|   |--[edit].tsx
|-- ...
© www.soinside.com 2019 - 2024. All rights reserved.