世博会线性渐变透明显示为黑色

Question

我正在尝试使用 Expo Linear Gradients 在 React Native 屏幕中实现从下到上的白色到透明白色的过渡： https://docs.expo.io/versions/latest/sdk/linear-gradient.html

我复制了第二个示例并将其翻转，并将其设为白色而不是黑色。但现在白色应该淡入的“透明”比白色更暗，见下文：

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

代码在这里：

     <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,
    }}
/>

Answer 3

我通过使用

LinearGradient

设置

{ position: 'absolute' }

视图的样式来解决这个问题。

代码片段：

<LinearGradient
  style={{
    position: 'absolute',
    left: 0,
    bottom: 0,
    right: 0,
    zIndex: 90,
  }}
  colors={['transparent', 'black']}
  start={{x: 0.5, y: 0}}
  end={{x: 0.5, y: 1}}>