React Navigation 6搭配Expo实现透明模态框出现灰色背景怎么办

核心问题排查及修复步骤 #

• 先确认你使用的导航栈类型，两种栈的透明模态框配置逻辑完全不互通：

  使用@react-navigation/stack（JS实现栈） #

  • 给Stack.Navigator的screenOptions配置两个参数：
    1. presentation: 'modal'
    2. cardStyle: { backgroundColor: 'transparent' }
  • 模态框页面的根View仅设置你需要的半透明背景，不要填充满不透明的颜色

  使用@react-navigation/native-stack（原生实现栈，Expo SDK 43默认引入） #

  • 不要给整个Stack.Navigator全局设置presentation，仅给模态框对应的单个Screen配置两个参数：
    1. presentation: 'transparentModal'
    2. contentStyle: { backgroundColor: 'transparent' }（原生栈默认给所有页面加白色背景，必须手动覆盖为透明）
  • 同时给模态框Screen设置headerShown: false，避免原生自带的头部和默认遮罩层生效
• 常见漏查项：
  • 不要在Stack.Navigator的全局screenOptions里配置cardStyle/contentStyle的背景色，全局配置会覆盖单个页面的透明设置
  • 检查导航容器（NavigationContainer）的外层父View是否设置了不透明背景，会直接遮挡下层页面的透出效果

内容的提问来源于stack exchange，提问作者Ryan Pergent