官方文档:https://github.com/react-native-community/react-native-linear-gradient/blob/master/README.md
安装
yarn add react-native-linear-gradient/npm install react-native-linear-gradient --save
react-native link react-native-linear-gradient
使用
import LinearGradient from 'react-native-linear-gradient';
import React, { Component } from 'react';
export default class DaysScreen extends React.Component {
render() {
return (
<View>
<LinearGradient colors={detailInfo.isPast?['#767B7E', '#4B4A50', '#323137']:['#90E2F8','#53CDFF','#35A1D0']} style={styles.title}>
<Text style={{color:'#ffffff',fontSize:18}}>{detailInfo.title}{detailInfo.dateStatus}</Text>
</LinearGradient>
</View>
)
}
参数详情
color:数组。一定要提供给他不少于两个元素。
start:对象。可选。格式为{x:number,y:number}
。坐标从左上角开始,声明渐变开始的位置,作为渐变整体大小的一部分。示例:{x:0.1,y:0.1}
表示梯度将从顶部开始为10%
,从左侧开始为10%
。
end:和start
一样。是指渐变的结束。比如我们需要从右上角开始到左下角渐变,即对角线渐变,这时就需要设置start={{x:1,y:0}} end={{x:0,y:1}}
locations:数组。可选。定义每个渐变颜色停止的位置,映射到颜色相同的索引颜色。例如:[0.1,0.75,1]
表示第一种颜色将占0%-10%
,第二种颜色将占据10%-75%
,最终第三种色彩将占据75%-100%
。