我想从 React Native 的标题底部删除模糊的边框。我正在使用 useLayoutEffect()
钩子(Hook)修改标题但无法删除边框。我试过使用 borderBottomWidth: 0
里面 headerStyle
但它不起作用。
useLayoutEffect(() => {
navigation.setOptions({
title: "Signal",
headerStyle: { backgroundColor: "#fff", borderBottomWidth: 0 },
headerTitleStyle: { color: "#000" },
headerTintColor: "#000",
});
}, [navigation]);
Emulator screenshot showing the border line to be removed
最佳答案
最近在 React Navigation 6 中遇到了这个问题,但发现还有另一种方法。根据文档有 headerShadowVisible
文档:
是否隐藏 header 上的高程阴影 (Android) 或底部边框 (iOS)。这是以下样式的简写:
{
elevation: 0,
shadowOpacity: 0,
borderBottomWidth: 0,
}
如果headerStyle
中指定了以上样式连同 headerShadowVisible: false
,然后 headerShadowVisible: false
将优先。示例:
<Stack.Screen
name="Example"
component={Example}
options={({ route }) => ({
title: route.params.title,
headerTintColor: '#fff',
headerStyle: {
backgroundColor: route.params.color,
},
headerShadowVisible: false, // applied here
headerBackTitleVisible: false,
})}
/>
关于javascript - 使用 useLayoutEffect 钩子(Hook)删除 React Native 中标题的底部边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66372004/