如何移除React Native StackNavigator与SafeAreaView共存时的内部阴影

我之前也遇到过一模一样的问题！当搭配设置了headerMode: 'none'的StackNavigator使用SafeAreaView时，出现的阴影其实是导航栏的样式残留导致的，给你两个靠谱的解决办法：

方案一：从StackNavigator根源清除阴影（推荐） #

直接在StackNavigator的配置里显式关闭导航栏阴影，这是最彻底的解决方式，因为阴影本来就来自导航栏的残留样式：

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

const Stack = createStackNavigator();

function YourStackNavigator() {
  return (
    <Stack.Navigator
      headerMode="none"
      screenOptions={{
        // React Navigation 6+ 用这个属性直接关闭阴影
        headerShadowVisible: false,
        // 如果是旧版本的React Navigation，用下面的样式设置
        // headerStyle: { shadowColor: 'transparent' }
      }}
    >
      {/* 这里放你的各个屏幕组件 */}
    </Stack.Navigator>
  );
}

设置之后，导航栏的阴影会被完全清除，自然不会影响到下方的SafeAreaView了。

方案二：给SafeAreaView添加样式覆盖阴影 #

如果方案一没起作用，也可以直接在SafeAreaView的样式里清除所有阴影相关属性，覆盖掉可能继承来的样式：

// 你的StyleSheet配置
const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: colors.background,
    // iOS端清除阴影
    shadowColor: 'transparent',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0,
    shadowRadius: 0,
    // Android端清除阴影对应的属性
    elevation: 0,
  },
});

这样不管哪里来的阴影样式，都会被SafeAreaView自身的样式覆盖掉。

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