react-native 颜色渐变之react-native-l
2018-06-27 本文已影响318人
oc123
安装：
npm install react-native-linear-gradient --save-dev
react-native link react-native-linear-gradient // 自动连接项目
安装之后运行react-native run-android可能会报错，别管多run几次；
例子：
import React from 'react'
import {
View,
Text,
StyleSheet,
Dimensions,
} from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
class mine extends React.Component {
constructor(props) {
super(props)
this.state = {
}
}
render() {
const bottomColor = `rgba(0, 0, 0, ${0})`
const maskColor = `rgba(0, 0, 0, ${0.5})`
return (
<View style={{ flex: 1, backgroundColor: 'white' }}>
<LinearGradient colors={[maskColor, bottomColor]} start={{ x: 0, y: 0 }} end={{ x: 0, y: 1 }} locations={[0, 0.75]} style={styles.linearGradient}>
<Text style={styles.buttonText}>
Sign in with Facebook
</Text>
</LinearGradient>
</View>
)
}
}
const styles = StyleSheet.create({
linearGradient: {
height: 64,
left: 0,
top: 0,
width: Dimensions.get('window').width,
},
buttonText: {
fontSize: 18,
fontFamily: 'Gill Sans',
textAlign: 'center',
margin: 10,
color: '#ffffff',
backgroundColor: 'transparent',
},
})
module.exports = mine
配置：
color
传数组，一定要提供给他不少于两个元素，比如['red','blue']，表示从红到蓝的渐变。
本例用自定义颜色：
colors={[maskColor, bottomColor]}
start
传对象，可选；格式为{x:number,y:number}。坐标从左上角开始，声明渐变开始的位置，作为渐变整体大小的一部分。示例：{x：0.1，y：0.1}表示梯度将从左侧10％、顶部10％开始。
end
同start，指渐变的结束。
本例用例：
start={{ x: 0, y: 0 }}
end={{ x: 0, y: 1 }}
locations
传数组，可选；定义每个渐变颜色停止的位置，映射到颜色相同的索引颜色。例如：[0.1,0.75,1]表示第一种颜色将占0％-10％，第二种颜色将占据10％-75％，最终第三种色彩将占据75％-100％。
在上例的基础上，我们想让bottomColor占比少一点，让他占25%，即从0.75到1这个区间都为bottomColor,[0,0.75]为渐变区间。
locations就可以这样设置：
locations={[0, 0.75]}
