安裝
yarn add react-native-linear-gradient
react-native link react-native-linear-gradient
安裝之后運(yùn)行react-native run-android可能會(huì)報(bào)錯(cuò)，比如說我會(huì)報(bào)一個(gè)cannot delete [filename]之類的錯(cuò)誤，把他說的那幾個(gè)文件刪了，再多run幾次就成功了。
使用
// 引用官網(wǎng)的例子
import LinearGradient from 'react-native-linear-gradient';
// Within your render function
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
<Text style={styles.buttonText}>
Sign in with Facebook
</Text>
</LinearGradient>
// Later on in your styles..
var styles = StyleSheet.create({
linearGradient: {
flex: 1,
paddingLeft: 15,
paddingRight: 15,
borderRadius: 5
},
buttonText: {
fontSize: 18,
fontFamily: 'Gill Sans',
textAlign: 'center',
margin: 10,
color: '#ffffff',
backgroundColor: 'transparent',
},
});
官網(wǎng)的例子
配置
color
數(shù)組。一定要提供給他不少于兩個(gè)元素，比如['red','blue']，表示從紅到藍(lán)的漸變。
本例用colors={['#295cce', '#14b7e6', '#fff']}
start
對(duì)象?？蛇x。格式為{x:number,y:number}。坐標(biāo)從左上角開始，聲明漸變開始的位置，作為漸變整體大小的一部分。示例：{x：0.1，y：0.1}表示梯度將從頂部開始為10％，從左側(cè)開始為10％。
end
和start一樣。是指漸變的結(jié)束。
舉個(gè)例子，比如我們需要從右上角開始到左下角漸變，即對(duì)角線漸變，這時(shí)就需要設(shè)置
start={{x:1,y:0}}
end={{x:0,y:1}}
對(duì)角線漸變
locations
數(shù)組。可選。定義每個(gè)漸變顏色停止的位置，映射到顏色相同的索引顏色。例如：[0.1,0.75,1]表示第一種顏色將占0％-10％，第二種顏色將占據(jù)10％-75％，最終第三種色彩將占據(jù)75％-100％。
在上例的基礎(chǔ)上，我們想讓白色占比多一點(diǎn)，讓他占50%，即從0.5到1這個(gè)區(qū)間都為白色,深藍(lán)色和湖藍(lán)色平分漸變這個(gè)區(qū)間。
locations就可以這樣設(shè)置：
locations={[0, 0.25, 0.5]}
location例子
