如何在 Android、React Navigation v6 上删除 React Native 的标题上的阴影？

【问题标题】：How do I remove the shadow on header for React Native on Android, React Navigation v6?如何在 Android、React Navigation v6 上删除 React Native 的标题上的阴影？
【发布时间】：2021-11-07 10:29:59
【问题描述】：

阴影看起来像这样。

我试过了

headerStyle: {
      elevation: 0,
      shadowOpacity: 0,
      borderBottomWidth: 0,
    }

但是根据这个链接 https://reactnavigation.org/docs/native-stack-navigator#options 在 React Navigation v6 中，headerStyle 中唯一支持的属性是 backgroundColor only。

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

对于 react-navigation v6，您可以使用 headerShadowVisible 隐藏或显示标题的阴影。

<Stack.Navigator screenOptions={{headerShadowVisible: false}}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Notifications" component {NotificationsScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
</Stack.Navigator>

【讨论】：