React Navigation 6.x版本如何隐藏头部导航栏的阴影？

解决方法 #

你配置不生效主要是两个原因：一是用了错误的配置参数名，二是仅修改headerTitle不会影响导航栏自带的阴影样式，具体修复方案如下：

方案1：使用导航栏自带配置隐藏阴影（不需要完全自定义头部） #

React Navigation 6.x及以上版本控制头部阴影的参数是headerShadowVisible，而非你用的headerHideShadow，同时需要针对安卓、iOS系统分别加样式兼容：

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{ 
    headerTitle: props => <MainHeader {...props} />, 
    headerBackTitle: '',
    headerTintColor: '#0f0f2b',
    // 核心配置：隐藏头部阴影
    headerShadowVisible: false,
    // 兼容不同系统的阴影消除
    headerStyle: {
      elevation: 0, // 消除安卓端阴影
      shadowOpacity: 0, // 消除iOS端阴影
      borderBottomWidth: 0 // 消除默认底部分割线
    }
  }}
/>

如果需要全局所有页面都隐藏阴影，把上述配置写到Stack.Navigator的screenOptions属性中即可。

方案2：完全自定义头部（适合头部样式改动大的场景） #

如果你的头部样式和默认导航栏差异大，直接替换整个头部组件，默认导航栏的阴影会直接消失：

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{ 
    // 直接替换整个头部，而非仅修改标题部分
    header: () => <MainHeader />,
    headerBackTitle: '',
    headerTintColor: '#0f0f2b'
  }}
/>

// 自定义头部可完全自主控制所有样式
function MainHeader(){
    return (
        <View style={{
            height: 48, // 按需求设置头部高度
            backgroundColor: '#fff',
            paddingHorizontal: 16,
            flexDirection: 'row',
            alignItems: 'center'
        }}>
            {/* 这里编写你自己的头部内容，比如标题、返回按钮、功能按钮等 */}
        </View>
    );
}

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