如何在React Native中实现实体盒阴影效果？

Question

有其他人尝试在 React Native 中实现这一效果吗？：

具有实体阴影效果的组件，可产生深度错觉。

您可能知道 React-Native 不支持 CSS

box-shadow

。不过，它确实有一个非常接近的等效属性，即

shadowOffset

属性，该属性仅适用于 iOS（上面示例中使用的内容）。据我所知，Android 的

elevation

属性没有模糊半径设置以使其成为实体。

我已经尝试过

react-native-shadow

和

react-native-shadow-2

套餐。两者似乎都存在遮蔽实际组件的问题，而是将其扩展到边缘，并且似乎也无法处理

borderRadius

。也许错过了什么。

我能得到的最接近的跨平台解决方案是添加更厚的底部

borderWidth

。但正如你所看到的，外观还是有点不对：

如果您有 Android 上此设计问题的解决方案，请 lmk。不可能没有简单的方法就能达到如此简单的效果吧？

Answer 1

无需向按钮添加阴影即可达到相同的效果。如果仔细观察，与任何其他侧面相比，效果只是从底部开始有额外的底部宽度。

神奇之处在于

borderBottomWidth

属性，只需保持该属性的值必须大于容器的

borderWidth

才能获得效果。

在这里，我尝试创建相同的效果，它看起来像这样：

你的容器风格应该是这样的。

imageContainer: {
    width: '50%',
    alignSelf: 'center',
    paddingVertical: 10,
    backgroundColor: 'white',
    alignItems: 'center',
    borderRadius: 15,
    borderWidth: 1,
    borderBottomWidth: 10, // Add more bottom width than regular to achieve the effect
}

这是小吃：https://snack.expo.dev/6KvkXqcYv_j1WnWAwEFPG