反应本机中的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)]} >

Answer 1

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

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。