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

【问题标题】：React Navigation Version 6: How to add header bottom border and change border color?React Navigation Version 6：如何添加标题底部边框并更改边框颜色？
【发布时间】：2022-12-17 07:12:48
【问题描述】：

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

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

以下是我到目前为止尝试过的选项：

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

以上选项都不适合我。

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

【问题讨论】：

尝试设置“borderWidth：1”
@AlapAnerao 感谢您的意见，但也没有用。我正在使用版本 6。

标签： react-native react-navigation

【解决方案1】：

本机堆栈没有选项，您需要使用堆栈导航器

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

您需要将样式发送到此参数 headerStyle 而不是选项的根

【讨论】：

【解决方案2】：

只需添加它即可添加边框 :)

   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,
        },
      }}>

【讨论】：