使用堆栈布局作为expo-router槽子路由

Question

我目前正在使用带有 expo SDK49 的 expo router 2。

我想添加一个插槽布局的子路由以呈现为堆栈布局 - 即整个屏幕替换为后退按钮。我似乎无法让它工作，而且我似乎在文档中找不到任何内容。

我制作了一个最小示例，附在下面。

如有任何帮助，我们将不胜感激。

项目结构

app
├── _layout.tsx
├── index.jsx
├── meow
│   └── test.tsx
└── woof
    ├── _layout.tsx
    └── test.tsx

应用程序/_layout.tsx

import { View, Text } from 'react-native'
import React from 'react'
import { Slot, Link } from 'expo-router'
import { SafeAreaView } from 'react-native-safe-area-context'

const Layout = () => {
  return (
    <SafeAreaView style={{flex: 1}}>
      <Header />
      <Slot />      
    </SafeAreaView>

  )
}

const Header = () => {
  return (
    <View style={{flex: 1}}> 
      <Text> Header </Text>
      <Link href='/meow/test' asChild>
        <Text> Click here to render meow into slot </Text>
      </Link>
    </View>
  )
}

export default Layout

应用程序/index.jsx

import { View, Text } from 'react-native'
import React from 'react'

const Page = () => {
  return (
    <View>
      <Text>Hello world</Text>
    </View>
  )
}

export default Page

喵/test.tsx

import { View, Text } from 'react-native'
import React from 'react'
import { Link } from 'expo-router'

const Page = () => {
  return (
    <View>
      <Text>I am at meow, in a slot.</Text>
      <Link href='/woof/test'>
        <Text>Going to woof, should be a stack.</Text>
      </Link>
    </View>
  )
}

export default Page

woof/_layout.tsx

import { View, Text } from 'react-native'
import React from 'react'
import { Stack } from 'expo-router'

const Layout = () => {
  return (
    <Stack />
  )
}

export default Layout

woof/test.tsx

import { View, Text } from 'react-native'
import React from 'react'

const Page = () => {
  return (
    <View>
      <Text>This is supposed to be a stack child!</Text>
    </View>
  )
}

export default Page

以下是每个屏幕的截图：

应用程序打开时的初始屏幕

点击喵，渲染到插槽中

从喵喵声到汪汪声，采用堆栈布局，但渲染到插槽中

我还尝试过使用带有堆栈布局的 meow/_layout.tsx ，但这也不起作用。

是否有可能用 Slot 做我想做的事情？如果不行的话有什么解决办法吗？

提前致谢，

Answer 1

除了使用 Slot 之外，你还可以使用 ??