如何应用线性渐变样式来响应原生屏幕？答案

【问题标题】：How to apply linear gradient style to react native screen?如何应用线性渐变样式来响应原生屏幕？
【发布时间】：2020-09-02 16:38:43
【问题描述】：

我需要将以下样式应用于应用程序屏幕。

fobackground: linear-gradient(180deg, #00599B 0%, #002F52 100%);

使用 react-native-linear-gradient，我尝试了以下代码，但不确定如何在样式中使用上面提供的 0% 和 100% 值。

<LinearGradient
  colors={['#00599B', '#002F52']}
  useAngle={true}
  angle={180}
  style={{
    flex: 1,
  }}>
  <Text style={styles.buttonText}>Sign in with Facebook</Text>
</LinearGradient>

【问题讨论】：

输出与您的预期有何不同？

标签： react-native linear-gradients

【解决方案1】：

您可以使用rgba 颜色解决此问题：

我将您的 HEX 转换为 RGBA 颜色：

<LinearGradient
  colors={['rgba(0, 89, 155, 0)', 'rgba(0, 47, 82, 1)']}
  useAngle={true}
  angle={180}
  style={{
    flex: 1,
  }}>
  <Text style={styles.buttonText}>Sign in with Facebook</Text>
</LinearGradient>

【讨论】：