React Native 中的 Css 线性渐变

Question

我正在尝试使用 react-native-linear-gradient 为 View 实现类似线性渐变的 css，但该插件只允许 2 种颜色，它不允许我设置渐变要径向，这是线性渐变的css格式 linear-gradient(151.76deg, #EE8F62 -43.83%, rgba(239, 203, 113, 0.96) 97.18%, rgba(242, 172, 136, 0.15) 120.83%); ，请问我怎样才能用插件实现上述目标，我试过这样做

<LinearGradient colors={[rgba(239, 203, 113, 0.96), rgba(242, 172, 136, 0.15)]} >

Answer 1

您不能像在 CSS 中那样在 React Native 中使用百分比值。但是，您可以使用以下值为渐变指定 Angular :

start={{x: 0, y: 1}} 
end={{x: 1, y: 0}}

例如:

<LinearGradient
     start={{x: 0, y: 1}} end={{x: 1, y: 0}}
     colors={['rgba(204,49,125,0.95)', 'rgba(255,117,84,0.95)', 'rgba(204,49,125,0.95)']}
     style = { styles.container }>

         {Your code here}

</LinearGradient>

上面的代码生成了一个从左下角开始到右上角结束的线性渐变。渐变的不透明度为 0.95。