ReactNavigationStack标头样式不起作用，只有他更改标头背景颜色

Question

如果有人尝试过，请帮助我，我正在尝试更改React-native stack导航中标头的边框颜色顶部和底部，任何人都尝试此事，请帮助我对此问题进行解决 这是我们使用标头样式更改标题边框和宽度的代码 ＆lt; stack.navigator

  >
    {state.token == null ? (
      <Stack.Screen
        name="Home"
        component={LoginScreen}
        options={{ headerShown: false }}
      />
    ) : (
      <Stack.Screen
        name="Dull"
        component={Tabs}
        options={{
          // headerStyle: styles.header,
          headerShown: false,
          title: "Clubs",
          headerTintColor: "#B49C72",
          headerTitleAlign: "center",
          headerTitleStyle: { color: "#B49C72" },
          headerStyle: {
            backgroundColor: "#080402",
          },
        }}
      />
    )}
    <Stack.Screen
      name="Forget"
      component={ForgetPassword}
      options={{
        // headerStyle: styles.header,
        title: "Forget Password",
        headerTintColor: "#B49C72",
        headerTitleAlign: "center",
        headerTitleStyle: { color: "#B49C72" },
        headerStyle: { backgroundColor: "#080402" },
      }}
    />
    <Stack.Screen
      name="Profiles"
      component={ProfileScreen}
      options={{
        // headerStyle: styles.header,
        title: "Profile",
        headerTintColor: "#B49C72",
        headerTitleAlign: "center",
        headerTitleStyle: { color: "#B49C72" },
        headerStyle: { backgroundColor: "#080402" },
      }}
    />
    <Stack.Screen
      name="Tabs"
      component={Tabs}
      options={{
        // headerStyle: styles.header,
        title: "Password Reset",
        headerTintColor: "#B49C72",
        headerTitleAlign: "center",
        headerTitleStyle: { color: "#B49C72" },
        headerStyle: { backgroundColor: "#080402" },
      }}
    />
    <Stack.Screen
      name="Du"
      component={Home}
      options={({ route, navigation }) => ({
        title: route.params.itemname,

        headerTintColor: "#B49C72",
        headerTitleAlign: "center",
        headerTitleStyle: { color: "#B49C72" },
        headerStyle: {
          backgroundColor: "#080402",
        },
        headerRight: () => <Header />,
      })}
    />
    {/* <Stack.Screen
      name="Dull"
      component={Tabs}
      options={{
        // headerStyle: styles.header,
        title: "Clubs",
        headerTintColor: "#B49C72",
        headerTitleAlign: "center",
        headerTitleStyle: { color: "#B49C72" },
        headerStyle: { backgroundColor: "#080402" },
      }}
    /> */}
    <Stack.Screen
      name="Dum"
      component={Dummy}
      options={({ route }) => ({
        title: route.params.productTitle,

        headerTintColor: "#B49C72",
        headerTitleAlign: "center",
        headerTitleStyle: { color: "#B49C72" },
        headerStyle: {
          backgroundColor: "#080402",
          borderBottomColor: "#85106a",
          borderBottomWidth: 5,
          borderTopWidth: 5,
          borderTopColor: "#85106a",
        },
      })}
    />
    <Stack.Screen
      name="Venue"
      component={Book}
      options={({ route }) => ({
        title: "Book Venue",

        headerTintColor: "#B49C72",
        headerTitleAlign: "center",
        headerTitleStyle: { color: "#B49C72" },
        headerStyle: {
          backgroundColor: "#080402",
          elevation: 0, // remove shadow on Android
          shadowOpacity: 0, // remove shadow on iOS

          borderColor: "#B49C72",
          borderBottomWidth: 2,
          borderBottomColor: "red",
          borderTopWidth: 2,
          borderTopColor: "red",
        },
      })}
    />
    <Stack.Screen
      name="Queues"
      component={Queue}
      options={({ route }) => ({
        title: "Queue Jump",
        borderBottomWidth: 0,

        headerTintColor: "#B49C72",
        headerTitleAlign: "center",
        headerTitleStyle: { color: "#B49C72" },
        headerStyle: {
          backgroundColor: "#080402",
        },
      })}
    />
    <Stack.Screen
      name="Forgets"
      component={Formessage}
      options={({ route }) => ({
        title: "Forget Password",

        headerTintColor: "#B49C72",
        headerTitleAlign: "center",
        headerTitleStyle: { color: "#B49C72" },
        headerStyle: { backgroundColor: "#080402" },
      })}
    />
    <Stack.Screen
      name="Resets"
      component={Resetmessage}
      options={({ route }) => ({
        title: "Reset Password",

        headerTintColor: "#B49C72",
        headerTitleAlign: "center",
        headerTitleStyle: { color: "#B49C72" },
        headerStyle: {
          backgroundColor: "#080402",
        },
      })}
    />
    <Stack.Screen
      name="Res"
      component={ResetPassword}
      options={({ route }) => ({
        title: "Reset Password",

        headerTintColor: "#B49C72",
        headerTitleAlign: "center",
        headerTitleStyle: { color: "#B49C72" },
        headerStyle: {
          backgroundColor: "#080402",
        },
      })}
    />
    <Stack.Screen
      name="Map"
      component={Map}
      options={({ route }) => ({
        title: "Queue Jump",

        headerTintColor: "#B49C72",
        headerTitleAlign: "center",
        headerTitleStyle: { color: "#B49C72" },
        headerStyle: {
          backgroundColor: "#080402",
          borderBottomColor: "#B49C72",
          borderBottomWidth: 1,
          borderTopWidth: 1,
          borderTopColor: "#B49C72",
        },
      })}
    />
    <Stack.Screen
      name="Ver"
      component={Verfied}
      options={({ route }) => ({
        title: "Queue Jump",

        headerTintColor: "#B49C72",
        headerTitleAlign: "center",
        headerTitleStyle: { color: "#B49C72" },
        headerStyle: {
          backgroundColor: "#080402",
          borderBottomColor: "#B49C72",
          borderBottomWidth: 1,
          borderTopWidth: 1,
          borderTopColor: "#B49C72",
        },
      })}
    />
    <Stack.Screen
      name="Un"
      component={Unverified}
      options={({ route }) => ({
        title: "Queue Jump",

        headerTintColor: "#B49C72",
        headerTitleAlign: "center",
        headerTitleStyle: { color: "#B49C72" },
        headerStyle: {
          backgroundColor: "#080402",
          borderBottomColor: "#B49C72",
          borderBottomWidth: 1,
          borderTopWidth: 1,
          borderTopColor: "#B49C72",
        },
      })}
    />
  </Stack.Navigator>
</NavigationContainer>

）;

Answer 1

我认为此文档页面提供您想要的内容。 https://reaectnavigation.org.org/docs/docs/docs/docs/stack-navigator/stack-navigator/pheadheader-wheader-wheader-wheader-wheader-wheader-pator-相关选项

这是设置边框颜色黑色，宽度为2的示例。

<Stack.Navigator screenOptions={{headerStyle: {borderColor: '#000', borderWidth: 2} }}>
{screens}
</Stack.Navigator>