无法在本机样式表中复制css border和box-shadow值

Question

This is the target spec

And this is where I am currently

这是规范的CSS代码

.card-bg {
    height: 410px;
    width: 343px;
    border: 1px solid #33CC99;
    border-radius: 8px;
    background-color: #FFFFFF;
    box-shadow: 0 0 16px 0 rgba(0,0,0,0.16);
}

这是样式表中的卡片容器

  container: {
    width: '100%',
    padding: 24,
    borderRadius: 8,
    borderColor: '#33CC99',
    borderWidth: 1,
    shadowColor: "rgba(0,0,0,0.16)",
    shadowOffset: {
      width: 10,
      height: 10,
    },
    shadowRadius: 2.22,
    elevation: 3,
  },

主要问题是，当我添加高程时，边框似乎总是出现在阴影的外部。另外我还无法复制阴影的深度。我试图用样式化的组件来实现它，但是由于某种原因使应用程序崩溃了。希望有人能帮助我在这方面坚持几天了。

Answer 1

box-shadow: 0 0 16px 0 rgba(0,0,0,0.16) 代表

  

阴影框：[水平偏移] [垂直偏移] [模糊半径]   [可选的传播半径] [颜色];

所以，您要做的是：

container: {
    backgroundColor:'white',
    padding: 24,
    margin:15,
    borderRadius: 8,
    borderColor: '#33CC99',
    borderWidth: 1,
    ...Platform.select({
     ios: {
       shadowColor: '#000',
       shadowRadius: 2,
       shadowOffset: { width: 0, height: 2 },
       shadowOpacity: 0.16,
     },
     android: {
       elevation: 4,
     },
    })
  },

但是您可以随时更改shadowRadius和高度以匹配目标规格

Answer 2

在本地反应中应用阴影的最佳方法

• 高程在ios中不起作用，因此您可以使用阴影道具

• 您可以从下面的链接创建阴影

https://ethercreative.github.io/react-native-shadow-generator/

ex：

card:{

shadowColor: "#000",

shadowOffset: {
    width: 0,
    height: 2,
},

shadowOpacity: 0.25,

shadowRadius: 3.84,

elevation: 5,

}