react native开发Android 篇——使用react-native-linear-gradient实现背景色渐变

邢灿
2023-12-01

官方文档: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%

 类似资料: