React导航版本6:如何添加页眉下边框和更改边框颜色?

bq3bfh9z  于 2022-12-19  发布在  React
关注(0)|答案(2)|浏览(132)

我试图添加一个边框到一个React导航标题,但没有为我工作。
请注意,我使用的是版本6。
以下是我迄今为止尝试过的选项:

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

以上选项对我都不起作用。
我查过了,但什么也没找到。

jum4pzuy

jum4pzuy1#

本机堆栈没有选项,您需要使用堆栈导航器
https://reactnavigation.org/docs/stack-navigator/#options
您需要将样式发送到此参数headerStyle,而不是选项的根

6rqinv9w

6rqinv9w2#

只需添加此内容即可在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,
        },
      }}>

相关问题