匹配React Navigation头部组件底部阴影/边框的宽度与底部选项卡边框顶部宽度

hs1rzwqc 于 2023-03-31 发布在 React

关注(0)|答案(1)|浏览(96)

我现在的目标是匹配React导航底部标签的顶部边框宽度，使其与顶部标题的宽度相同。由于某些原因，我无法准确获得宽度，并且我不确定此时它是宽度还是阴影。任何关于我应该如何实现这一点的上下文都将非常感谢。
这就是我目前所拥有的底部标签样式。

<Tab.Navigator
      screenOptions={{
        headerShown: false,
        tabBarShowLabel: false,
        tabBarStyle: {
          borderTopWidth: 0.3,
          backgroundColor: brand.colors.background,
        },
      }}
    >

这是它看起来像一个边框顶部宽度为0.3

react-native

来源：https://stackoverflow.com/questions/75881092/matching-the-width-of-the-react-navigation-header-components-bottom-shadow-borde

1条答案

按热度按时间

pqwbnv8z1#

以下样式在@react-navigation/elements包中用于Header组件。我尝试了它们，但发现颜色可能仍然关闭。您可以尝试使用不透明度来匹配您喜欢的颜色。

const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      android: {
        elevation: 4,
      },
      ios: {
        shadowOpacity: 0.85,
        shadowRadius: 0,
        shadowOffset: {
          width: 0,
          height: StyleSheet.hairlineWidth,
        },
      },
      default: {
        borderBottomWidth: StyleSheet.hairlineWidth,
      },
    }),
  },
});

在GitHub上查看HeaderBackground.tsx。

赞(0）回复(0）举报 2023-03-31

我来回答

匹配React Navigation头部组件底部阴影/边框的宽度与底部选项卡边框顶部宽度

1条答案

相关问题

热门标签

最新问答