React Native中的CSS线性渐变

Question

我正在尝试使用react-native-linear-gradient插件来实现类似于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)]} >

- Adokiye Iruene

---

似乎库还不支持径向渐变。请参考 https://github.com/react-native-community/react-native-linear-gradient/issues/29 - Harkirat Saluja

Answer 1

在React Native中，你不能像在CSS中那样使用百分比值。但是，你可以使用以下值来为渐变指定角度：

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。

- Surendra Pathak