如何像普通标签栏一样向“<View>”添加阴影

Question

这是我使用 <View>

自定义的导航栏

我可以像普通的反应导航栏一样添加底部阴影吗（如下图）？

添加阴影对我来说似乎很难

  header: {
    height: 55,
    flexDirection: 'row',
    shadowColor: 'black',
    shadowOpacity: 0.1,
    shadowRadius: 5,
    shadowOffset: {
      height: 5,
    },
    elevation: 4,
    zIndex: -1,
    overflow: 'visible'
  },

Answer 1

您可以简单地使用 CSS:

header: {
    height: 55,
    flexDirection: 'row',
    shadowColor: "#000000",
    shadowOpacity: 0.8,
    shadowRadius: 2,
    shadowOffset: {
        height: 1,
        width: 1
    }
}

根据您的方便调整数值。在某些情况下，您需要确保设置了适当的 zIndex 值并仔细检查您的 header overflow 是否为 visible.

Answer 2

你没有在 shadowOffset 中使用宽度，这就是你没有得到阴影的原因。

shadowOffset: {
    height: 2,
    width: 2 
}

如何像普通标签栏一样向“<View>”添加阴影

How to add shadow to `<View>` like normal tab bar

css

reactjs

react-native

react-navigation