在React Native中使用框阴影创建UI [英] Creating a UI with box shadow in react native

问题描述

我正在尝试在React Native中创建一个UI，该UI包含一个带有外部阴影的框.使用我已经完成的图像，但是有什么正确的方法吗?

I am trying to create a UI in react native, the UI contains a box with outer shadow. using the image I have done that, but is there any proper way to do that?

推荐答案

您将不得不为iOS和Android使用不同的样式道具.

You will have to use different style props for iOS and Android.

Android

这对于android非常简单，只需使用 elevation 样式道具(请参见

It's very simple for android, just use the elevation style prop (See docs) . An example:

boxWithShadow: {
    elevation: 5
}

iOS

在iOS中，您具有更大的灵活性，请使用Shadow道具(请参见 docs ).例子:

In iOS you have more flexibility, use the Shadow props (See docs). An example:

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

摘要

总而言之，要获得两个平台的盒子阴影，请同时使用两组样式道具:

In summary, to get box shadow for both platforms, use both sets of style props:

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

注意: 请勿在所有 iOS 中使用 overflow:'hidden'; 阴影消失了.

Attention: Do not use overflow: 'hidden';, in iOS all of the shadows disappear by this property.

这篇关于在React Native中使用框阴影创建UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！