在本机中创建带有框阴影的UI

Question

我试图在本机中创建一个UI,UI包含一个带有外部阴影的框.使用我已经完成的图像,但是有没有正确的方法呢？

附加图像

Answer 1

你将不得不为iOS和Android使用不同的风格道具.

Android的

它对于android来说非常简单,只需使用elevation样式道具(参见文档).一个例子:

boxWithShadow: {
    elevation: 5
}

iOS版

在iOS中你有更多的灵活性,使用Shadow道具(见文档).一个例子:

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

摘要

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

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

注意: 不要使用overflow: 'hidden';,在iOS所有阴影中都会被这个属性消失.

Answer 2

嘿，看现在完成了！

const styles = StyleSheet.create({
    shadow: {  
      borderColor:'yourchoice', // if you need 
      borderWidth:1,
      overflow: 'hidden',
      shadowColor: 'yourchoice',
      shadowRadius: 10,
      shadowOpacity: 1,
    }
});

请记住，阴影的道具仅适用于 IOS。