Question

我有一个CSS渐变 -

background-image: linear-gradient(-140deg, #93C6F9 25%, #97B4FA 40%, #A768FE 100%);

我想将其转换为Expo＆＃39; s Linear Gradient

我尝试了以下解决方案 -

<LinearGradient
      colors={['#93C6F9', '#97B4FA', '#A768FE']}
      start={[0.25, 0.4, 1]}
      style={styles.gradient}
    >
    <Text>ABC</Text>
</LinearGradient>

但结果有点不同。我猜这与-140deg不知何故有关。怎么做???

Answer 1

我使用location prop＆amp;与

达成了一点距离

<LinearGradient
      colors={['#93C6F9', '#97B4FA', '#A768FE']}
      start={[0, 0]}
      end={[1, 1]}
      location={[0.25, 0.4, 1]}
      style={styles.gradient}
    >
      <Text>ABC</Text>
    </LinearGradient>

Answer 2

我可以通过添加以下内容来完成此操作：

        <LinearGradient
          colors={['#93C6F9', '#97B4FA', '#A768FE']}
          start={[0, 0]}
          end={[1, 0]}
          <Text>
            ABC
          </Text>
        </LinearGradient>

您可以看到live example here

和Codepen of the gradient

将CSS渐变转换为Expo的线性渐变？

2 个答案: