Expo Router中动态路由文件夹（如[search]）内Modal页面无法正常呈现的问题

嘿，我来帮你搞定这个动态路由里Modal的小坑！你遇到的情况其实是Expo Router嵌套栈配置的常见问题，我给你一步步拆解解决方案：

首先明确你的场景：你在app/[search]/下设置了嵌套栈布局，想把filter.tsx做成Modal，但默认的嵌套栈会把所有页面渲染成全屏，导致Modal没法正常弹出。核心解决思路就是给目标Modal页面单独配置presentation展示模式，同时确保导航逻辑正确。

第一步：修改动态路由的布局文件[search]/_layout.tsx #

你需要在Stack组件里，给filter页面单独指定presentation属性，让它以Modal形式渲染，还要兼顾iOS和Android的平台差异：

import { Stack } from 'expo-router'
import { Platform } from 'react-native'

export default function SearchStackLayout() {
  return (
    <Stack>
      {/* 普通搜索主页用默认配置即可 */}
      <Stack.Screen name="index" options={{ title: '搜索结果' }} />
      {/* 给筛选Modal页面单独配置展示规则 */}
      <Stack.Screen
        name="filter"
        options={{
          // iOS用原生Modal样式，Android用全屏Modal适配系统特性
          presentation: Platform.OS === 'ios' ? 'modal' : 'fullScreenModal',
          // 不需要默认导航头部的话可以隐藏
          headerShown: false,
          // iOS上开启手势关闭，优化交互体验
          gestureEnabled: true,
        }}
      />
    </Stack>
  )
}

第二步：确保导航到Modal页面的路径正确 #

在index.tsx里，因为和filter.tsx在同一个动态路由文件夹下，直接用相对路径./filter导航就好，不用写完整的动态路由路径：

import { useRouter } from 'expo-router'
import { Button, View, StyleSheet } from 'react-native'

export default function SearchIndex() {
  const router = useRouter()

  return (
    <View style={styles.container}>
      <Button
        title="打开筛选面板"
        onPress={() => router.push('./filter')}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
})

额外注意点 #

• 如果你的根布局是Tabs组件，嵌套的动态路由栈会在Tabs内部，但只要给filter页面设置了正确的presentation属性，Expo Router会自动把Modal提升到全局层级，不会被Tabs遮挡；
• 建议把Expo和Expo Router更新到最新稳定版，旧版本可能存在动态路由与Modal兼容的小bug；
• 想要更定制化的Modal样式（比如半透明背景），可以在filter.tsx里自己写绝对定位的容器，配合iOS专属的presentation: 'transparentModal'来实现。

我之前帮好几个开发者解决过这个问题，按照上面的步骤改完，你的筛选Modal应该就能正常弹出来啦！

备注：内容来源于stack exchange，提问作者frizurd