css - 在 react-native 样式表中复制 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) 代表

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

所以，你需要做的是:

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,
     },
    })
  },

但您始终可以更改阴影半径和高度以匹配目标规范