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

Question

我想删除 React Native 中标题底部的微弱边框。我正在使用

useLayoutEffect()

钩子来修改标题，但无法删除边框。我尝试过在

borderBottomWidth: 0

内使用

headerStyle

但不起作用。

    useLayoutEffect(() => {
        navigation.setOptions({
          title: "Signal",
          headerStyle: { backgroundColor: "#fff", borderBottomWidth: 0 },
          headerTitleStyle: { color: "#000" },
          headerTintColor: "#000",
        });
      }, [navigation]);

Answer 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,
  })}
/>

Answer 2

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

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

Answer 3

将

headerShadowVisible: false

传递给 navigation.setOptions({})。

在示例中，我使用 useLayout 来避免更新时出现任何 UI 问题，如果您需要在屏幕中进行设置，我建议您也这样做。

示例：

  useLayoutEffect(() => {
    navigation.setOptions({
      headerTitle: () => <Image source={source} />,
      headerShadowVisible: false,
    })
  }, [navigation])

这是我在类型文件中找到的一些文档

   /**
     * Whether to hide the elevation shadow (Android) or the bottom border (iOS) on the header.
     */
    headerShadowVisible?: boolean;
    /**
     * Boolean indicating whether the navigation bar is translucent.
     * Setting this to `true` makes the header absolutely positioned,
     * and changes the background color to `transparent` unless specified in `headerStyle`.
     */

Answer 4

headerStyle: {
  borderWidth: 0,
  elevation: 0,
  shadowOpacity: 0,
},

Answer 5

如果您使用“react-navigation”：“^5.0.0”及以上，摆脱底部边框非常简单......`输入 返回 （ （{ headerBackTitleVisible: false, headerBackVisible：假， 标题: '', headerShadowVisible: false, // 可以设置为整体不可见 //这里屏幕 })} >

</RootStack.Navigator>

）；代码在这里`