React Navigation 版本 6：如何添加标题底部边框并更改边框颜色？

Question

我正在尝试向反应导航标题添加边框，但没有任何效果。

请注意，我使用的是版本 6。

以下是我迄今为止尝试过的选项：

options={{
          headerShadowVisible: true,
          shadowOffset: { height: 0, width: 0 },
          shadowColor: 'red',
          borderBottomColor: 'red',
          borderBottomWidth: 4,   
        }}

以上选项都不适合我。

我已经检查了docs，但我找不到任何东西。

Answer 1

没有原生堆栈选项，您需要使用堆栈导航器

https://reactnavigation.org/docs/stack-navigator/#options

并且您需要将样式发送到此参数

headerStyle

而不是选项的根

Answer 2

只需添加此即可在 nacigator v6 中添加边框:)

   contentStyle: {
          borderTopColor: colours.primary,
          borderTopWidth: 3,
        },

这就是我的样子：

<Stack.Navigator
      initialRouteName="BreaksNavigationScreen"
      screenOptions={{
        statusBarStyle: 'dark',
        headerShown: true,
        headerTintColor: colours.whiteAlways,
        headerTitleStyle: {color: colours.whiteAlways},
        headerStyle: {
          backgroundColor: colours.secondary900,
        },
        headerRight: () => <AppToggleDarkMode />,
        contentStyle: {
          borderTopColor: colours.primary,
          borderTopWidth: 3,
        },
      }}>

Answer 3

您可以使用以下代码来应用屏幕边框：

 contentStyle: {
      borderTopColor: colours.primary,
      borderTopWidth: 3,
    },

如果标题上有条纹或微小的边框颜色，希望将其删除 添加

  headerShadowVisible: false,