React Native中iOS端透明Stack Navigator无法正常工作

这个问题我之前也碰到过，确实是React Navigation在iOS端的默认机制导致的——你猜的没错，iOS的Stack Navigator卡片下面确实有个默认黑色的底层视图，即使卡片本身设了透明，这个视图还是会露出来。给你两个针对性的解决方案，分版本来看：

针对React Navigation 5.x及以上版本 #

如果你用的是较新的版本，直接开启transparentCard配置就能解决，配合卡片样式的透明设置：

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function MyStackNavigator() {
  return (
    <Stack.Navigator
      screenOptions={{
        cardStyle: { backgroundColor: 'transparent' },
        transparentCard: true // 关键：开启透明卡片模式，隐藏iOS默认的黑色底层视图
      }}
    >
      <Stack.Screen name="ScreenOne" component={ScreenOne} />
    </Stack.Navigator>
  );
}

针对React Navigation 4.x及以下旧版本 #

如果还在使用旧版的StackNavigator，需要把导航模式设为modal，同时通过transitionConfig把容器背景也设为透明：

const MyStackNavigator = createStackNavigator(
  {
    ScreenOne: { screen: ScreenOne }
  },
  {
    mode: 'modal',
    cardStyle: { backgroundColor: 'transparent' },
    transitionConfig: () => ({
      containerStyle: {
        backgroundColor: 'transparent'
      }
    })
  }
);

补充下原因：Android端的Stack Navigator默认没有这个额外的黑色背景容器，只需要设置卡片的backgroundColor就能实现透明效果；而iOS为了适配模态过渡的动画逻辑，默认添加了这个底层视图，所以必须通过额外配置来隐藏它。

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