javascript - 使用 useLayoutEffect 钩子(Hook)删除 React Native 中标题的底部边框

Question

我想从 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

Answer 1

最近在 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,
  })}
/>