安裝
yarn add react-native-linear-gradient
react-native link react-native-linear-gradient
安裝之后運(yùn)行react-native run-android可能會(huì)報(bào)錯(cuò)昏翰，比如說(shuō)我會(huì)報(bào)一個(gè)cannot delete [filename]之類的錯(cuò)誤，把他說(shuō)的那幾個(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',
},
});
配置
color
數(shù)組狂秘。一定要提供給他不少于兩個(gè)元素，比如['red','blue']假残，表示從紅到藍(lán)的漸變缭贡。
本例用colors={['#295cce', '#14b7e6', '#fff']}
start
對(duì)象』岳粒可選阳惹。格式為{x:number,y:number}。坐標(biāo)從左上角開(kāi)始眶俩，聲明漸變開(kāi)始的位置莹汤，作為漸變整體大小的一部分。示例：{x：0.1颠印，y：0.1}表示梯度將從頂部開(kāi)始為10％纲岭，從左側(cè)開(kāi)始為10％。
end
和start一樣嗽仪。是指漸變的結(jié)束荒勇。
舉個(gè)例子，比如我們需要從右上角開(kāi)始到左下角漸變闻坚，即對(duì)角線漸變沽翔，這時(shí)就需要設(shè)置
start={{x:1,y:0}}
end={{x:0,y:1}}
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]}
