我对一个组件有一个非常(相对)复杂的样式要求。部分复杂性来自 CSS box-shadow 属性。正如我们所知，React Native 不提供此属性。相反，必须使用四个样式属性 shadowOffset、shadowRadius、shadowColor 和 shadowOpacity。对于这个组件，我有四个实际阴影，其中两个有 inset -- React Native 不支持 insets。

这是我要实现的 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;

我完全不知所措。我已经尝试了很多东西。我已经尝试在 React Native 中使用开箱即用的 shadow* 属性，并尝试重新创建像 this fella 这样的插图做过。我试过使用 styled components .我什至尝试使用 SVG 进行破解(此要求来自提供 SVG 的 Figma)。

关于如何让它发挥作用的任何想法？

我在想，也许我唯一的选择是桥接到原生 iOS 组件，但我从来没有桥接过那个鸿沟，这看起来很吓人。

最佳答案

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

背景 #777 效果很好

https://stackoverflow.com/questions/64744006/