用插图反应本机复杂阴影

Question

我对组件有非常（相对）复杂的样式要求。部分复杂性来自CSS box-shadow属性。众所周知，React Native不提供此属性。相反，必须使用四个样式属性shadowOffset，shadowRadius，shadowColor和shadowOpacity。对于此组件，我有四个实际阴影，其中两个具有inset，这是React Native不支持插图的。

这是我要实现的CSS代码段：

background: #FFFFFF;
box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.07), 
       0px 8px 16px rgba(0, 0, 0, 0.07), 
       inset 0px 2px 4px #FFFFFF, 
       inset 0px -2px 4px rgba(0, 0, 0, 0.25);
border-radius: 16px;

我全神贯注。我已经尝试了很多事情。我尝试过将现成的shadow*属性与React Native配合使用，并尝试像this fella那样重新创建一个插图。我尝试使用styled components。我什至尝试使用SVG一起破解（此要求来自提供SVG的Figma）。

关于如何使它工作的任何想法？

我在想，也许我唯一的选择是桥接到本机iOS组件，但我从未弥合过这种鸿沟，而且似乎令人生畏。

Answer 1

 <LinearGradient
  style={styles.gradientButton}
  colors={['#040406', '#040406', '#040406', '#444446']}
  start={{ x: 0.48, y: 0.1 }}
  end={{ x: 0.5, y: 0.6 }}
>

背景 #777 效果很好