世博会线性渐变透明呈现黑色

Question

我尝试使用Expo Linear Gradients在我的React Native屏幕中进行从底部到顶部的白色到透明 - 白色过渡： https://docs.expo.io/versions/latest/sdk/linear-gradient.html

我复制了第二个例子并将其翻转，并使其变为白色而不是黑色。但现在＆＃34;透明＆＃34;白色应该淡入，白色更暗，见下文：

透明实际上是透明的，所以这很好，但有没有办法给它一个白色的色调？

代码在这里：

     <LinearGradient
         colors={[ 'transparent', 'rgba(255,255,255,0.8)']}
         style={{
           position: 'absolute',
           left: 0,
           right: 0,
           bottom: 0,
           height: 200,
         }}
       />

Answer 1

这是因为transparent等于rgba(0,0,0,0)

尝试使用rgba(255,255,255,0)代替透明来获得白色到白色的转换

w3规范将透明定义为transparent black，因为可以阅读here

Answer 2

我实际上找到了自己的答案。 “透明”显然转换为黑色透明，白色只需在白色通道中指定一个rgba（），如下所示：

<LinearGradient
    colors={[ 'rgba(255,255,255,0)', 'rgba(255,255,255,1)']}
    style={{
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0,
        height: 80,
    }}
/>