rn、react-native实现背景颜色渐变

实践是最好的老师

于 2021-07-05 20:12:23 发布

阅读量2.7k

点赞数

文章标签： react native

本文链接：https://blog.csdn.net/qq_26889291/article/details/118497588

版权

这篇博客展示了如何在React Native应用中创建水平、垂直和透明的线性渐变效果。通过导入'react-native-linear-gradient'库，可以轻松实现按钮背景的渐变颜色，包括从浅蓝到深蓝的水平渐变，从上至下的垂直渐变，以及从完全透明到半透明的过渡。示例代码详细地解释了各个属性的用法，如'start'、'end'和'colors'。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用
import LinearGradient from ‘react-native-linear-gradient’;

水平渐变
<LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
  <Text style={styles.buttonText}>
    Sign in with Facebook
  </Text>
</LinearGradient>
垂直渐变
<LinearGradient start={{x: 0, y: 0}} end={{x: 0, y: 1}} colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
  <Text style={styles.buttonText}>
    Sign in with Facebook
  </Text>
</LinearGradient>
透明渐变
<LinearGradient start={{x: 0, y: 0}} end={{x: 0, y: 1}} 

colors={['rgba(0,0,0,0.00)', 'rgba(0,0,0,0.80)']} 
style={styles.linearGradient}>
  <Text style={styles.buttonText}>
    Sign in with Facebook
  </Text>
</LinearGradient>