英文:
Expo-Router Bottom tabs with nested Stack Screen
问题
我正在尝试使用新的Expo-Router进行复杂的嵌套导航，目前我正在尝试显示一个带有模态展示的屏幕，该模态本身是底部选项卡导航的一部分，但它不是作为模态显示，而是作为一个简单的堆栈屏幕：
项目布局：
app/
_layout.tsx
index.tsx
(main)/
_layout.tsx
(tabs)/
_layout.tsx
home/
create/
profile/
search/
notifications/
(main)/(tabs)/_layout.tsx:
import { Tabs } from "expo-router/tabs";
export default function Layout() {
return (
<Tabs>
<Tabs.Screen name='home'/>
<Tabs.Screen name='search'/>
<Tabs.Screen name='create'/> // 应该被呈现为模态
<Tabs.Screen name='notifications'/>
<Tabs.Screen name='profile'/>
</Tabs>
)
}
(main)/(tabs)/create/_layout.tsx:
import { Stack } from "expo-router/stack";
export default function Layout() {
return (
<Stack>
<Stack.Screen name="index" options={{ presentation: "modal" }}/>
</Stack>
)
}
create 页面应该是一个堆栈，其展示方式设置为模态，以便它以模态屏幕的方式工作/呈现，对吗？
可复现的存储库：- https://github.com/theartificialguy/Threads
英文:
I am trying the new Expo-Router with a complex nesting navigation, currently i'm trying to display a screen with a presentation of modal, which itself is a part of a bottom tab navigation, but it is not presenting as a modal but as a simple stack screen:
Project layout:
app/
_layout.tsx
index.tsx
(main)/
_layout.tsx
(tabs)/
_layout.tsx
home/
create/
profile/
search/
notifications/
(main)/(tabs)/_layout.tsx:
import {Tabs} from "expo-router/tabs";
export default function Layout() {
return (
<Tabs>
<Tabs.Screen name='home'/>
<Tabs.Screen name='search'/>
<Tabs.Screen name='create'/> // should be presented as modal
<Tabs.Screen name='notifications'/>
<Tabs.Screen name='profile'/>
</Tabs>
)
}
(main)/(tabs)/create/_layout.tsx
import {Stack} from "expo-router/stack";
export default function Layout() {
return (
<Stack>
<Stack.Screen name="index" options={{presentation: "modal"}}/>
</Stack>
)
}
The create page should be a stack with presentation set to modal in order for it to work/render as a modal screen right?
Reproducible repo:- https://github.com/theartificialguy/Threads
答案1
得分: 1
我使用 Tabs.Screen 中的 listener 属性成功解决了这个问题。
参考链接：https://stackoverflow.com/a/68900301/11685381
英文:
I was able to solve it using the listener prop in Tabs.Screen.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论