react-native - 在 React Native 中创建带有框阴影的 UI

Question

我正在尝试在 React Native 中创建一个 UI，该 UI 包含一个带有外阴影的框。使用我已经完成的图像，但是有没有合适的方法来做到这一点？

Answer 1

你将不得不为 iOS 和 Android 使用不同的风格 Prop 。

安卓

对于android来说非常简单，只需使用elevation样式 Prop (见 docs)。一个例子:

boxWithShadow: {
    elevation: 5
}

iOS

在 iOS 中你有更多的灵活性，使用 Shadow Prop (见 docs)。一个例子:

boxWithShadow: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.8,
    shadowRadius: 1,  
}

摘要

总之，要获得两个平台的框阴影，请使用两组样式 Prop :

boxWithShadow: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.8,
    shadowRadius: 2,  
    elevation: 5
}

关注:请勿使用 overflow: 'hidden'; , 在 iOS所有的阴影都被这个属性消失了。