如何移除React Navigation v6安卓端React Native应用导航头部阴影

核心解决方案 #

你使用的是 createNativeStackNavigator 原生栈而非JS栈createStackNavigator，原生栈的导航头由系统原生组件渲染，此前针对JS栈的elevation/shadowOpacity配置不生效，可使用原生栈专属的headerShadowVisible配置项解决问题：

1. 全局关闭所有页面头部阴影 #

在导航器的screenOptions中添加配置：

import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();

function RootNavigator() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShadowVisible: false, // 关闭所有页面导航头阴影
      }}
    >
      {/* 此处注册你的路由页面 */}
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
  );
}

2. 单独给指定页面关闭阴影 #

仅需要单个页面无阴影时，在对应路由的options中配置即可：

<Stack.Screen 
  name="DetailPage" 
  component={DetailPage}
  options={{
    headerShadowVisible: false,
  }}
/>

补充说明 #

如果配置后仍有浅灰色底部分割线，可同步在headerStyle中设置backgroundColor和页面背景色完全一致即可。

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