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

fquxozlt  于 6个月前  发布在  React
关注(0)|答案(1)|浏览(60)

场景:

  • 导航到特定路线的组件
  • 此组件用于多个屏幕
  • 该组件用于不在它将路由推送到的选项卡堆栈中的屏幕
const Component = () => {
  ...
  return (
    <Pressable
       ...
       onPress={() => router.push('[otherTab]/[screenWithinOtherTabStack]')}
    >
    ...
}

字符串

  • 导航至新屏幕后,页眉中有一个后退按钮
...OtherTabNavigator()

 return(
    <Stack
      ...
      screenOptions={{
        ...
        headerLeft={() => (
          <Pressable
            onPress={() => router.back()}
            ...
          >
            ...

  • router.back()将导航到[otherTab],而不是其来源的选项卡/屏幕

推送的路由似乎丢失了路由上的任何状态。
我试着用useNavigation()从当前路径获取密钥,然后导航到'[otherTab]/[screenWithinOtherTabStack]',将密钥作为参数传递,但我无法使用密钥导航回推送起源的特定屏幕路径。
如果任何人有任何洞察力,像这样的情况已经成功地处理,这将是非常感谢。

wmtdaxz3

wmtdaxz31#

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

示例:

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

路由器结构

app
|-- (tabs)
|   |-- post
|   |-- comments
|   |-- ...
|-- post
|   |--[edit].tsx
|-- ...

字符串

相关问题