使用 useLayoutEffect 钩子删除 React Native 中标题的底部边框答案

【问题标题】：Remove bottom border of header in React Native using useLayoutEffect hook使用 useLayoutEffect 钩子删除 React Native 中标题的底部边框
【发布时间】：2026-01-22 12:25:01
【问题描述】：

我想移除 React Native 中标题底部的模糊边框。我正在使用useLayoutEffect() 钩子来修改标题但无法删除边框。我尝试在headerStyle 中使用borderBottomWidth: 0，但它不起作用。

    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

【问题讨论】：

标签： javascript react-native react-hooks border

【解决方案1】：

最近在 React Navigation 6 中遇到了这个问题，但发现还有另一种方法。根据文档有headerShadowVisible

文档：

是否隐藏标头上的高程阴影 (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,
  })}
/>

【讨论】：

【解决方案2】：

如果您使用 react-navigation，您可以通过在 navigationOptions 中为 headerStyle 指定以下内容来移除底部边框：

headerStyle: {
  shadowColor: 'transparent', // this covers iOS
  elevation: 0, // this covers Android
},

【讨论】：