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

Question

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

    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优先。

例子：

{
  elevation: 0,
  shadowOpacity: 0,
  borderBottomWidth: 0,
}

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`.
     */