ReactNavigationStack头样式不工作，只有他改变头的背景颜色

Question

如果有人尝试这样做，请帮助我，我正试图改变顶部和底部的边界颜色在反应原生堆栈导航，任何人尝试这个请帮助我排序这个问题这是我们使用header样式来改变header边框和宽度的代码& lt;堆栈。导航器

>
{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://reactnavigation.org/docs/stack-navigator/header-related-options

下面是一个设置边框颜色为黑色，宽度为2的例子。

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