您好,登錄后才能下訂單哦!
這篇文章主要講解了“react native如何設(shè)置頁(yè)面背景色”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來(lái)研究和學(xué)習(xí)“react native如何設(shè)置頁(yè)面背景色”吧!
react native設(shè)置頁(yè)面背景色的方法:1、通過(guò)“yarn add react-native-linear-gradient”安裝“react-native-linear-gradient”組件;2、通過(guò)在頁(yè)面設(shè)置“<LinearGradient colors={['#FFD801', '#FF8040', '#F75D59']} style= {...}”來(lái)實(shí)現(xiàn)背景色。
React-Native使用漸變背景色
在 CSS 中使用漸變只需要用 linear-gradient 就可以,但是在 React-Native 項(xiàng)目中卻不可以直接通過(guò)屬性去實(shí)現(xiàn),需要安裝一個(gè) react-native-linear-gradient 才可實(shí)現(xiàn)。
首先安裝組件 react-native-linear-gradient
yarn add react-native-linear-gradient
在頁(yè)面中使用
import React from 'react';
import {Text, StyleSheet, View, Dimensions} from 'react-native';
import LinearGradinet from 'react-native-linear-gradient';
export default class Home extends React.Component {
render() {
return (
<LinearGradient colors={['#FFD801', '#FF8040', '#F75D59']} style= {styles.linearGradient}>
<Text style={{color:'#ffffff'}}>
Sign in with Facebook
</Text>
</LinearGradient>
);
}
}
const styles = StyleSheet.create({
content: {
justifyContent:'center',
alignItems:'center',
width:200,
height:50,
paddingLeft: 15,
paddingRight: 15,
borderRadius: 5
},
});
效果:
LinearGradient的屬性:
colors
start/end
locations
colors
An array of at least two color values that represent gradient colors. Example: ['red', 'blue'] sets gradient from red to blue.
至少2個(gè)顏色值,用于顏色漸變。
start
An optional object of the following type: { x: number, y: number }. Coordinates declare the position that the gradient starts at, as a fraction of the overall size of the gradient, starting from the top left corner. Example: { x: 0.1, y: 0.1 } means that the gradient will start 10% from the top and 10% from the left.
可選的對(duì)象,形式如: { x: number, y: number }。坐標(biāo)宣告了漸變的開始位置。
end
Same as start, but for the end of the gradient.
和start一樣,但是漸變的結(jié)束位置。
start和end同時(shí)存在,漸變的起點(diǎn)和終點(diǎn)的連線,即使?jié)u變的軌跡方向。
start={{ x : 0.0, y : 0.25 }}
end={{ x : 0.5, y : 1.0 }}
locations
An optional array of numbers defining the location of each gradient color stop, mapping to the color with the same index in colors prop. Example: [0.1, 0.75, 1] means that first color will take 0% - 10%, second color will take 10% - 75% and finally third color will occupy 75% - 100%.
可選數(shù)組,內(nèi)容是一些列數(shù)字,定義了colors中對(duì)應(yīng)的每個(gè)漸變顏色的停止位置。
<LinearGradient start={{ x : 0.0, y : 0 }} end={{ x : 1, y : 0 }} locations={[ 0.1, 0.7, 1 ]} colors={[ 'yellow', 'green', '#ff0000' ]} style={styles.linearGradient}> <Text style={styles.buttonText}>
Sign in with Facebook </Text></LinearGradient>
0.1-0.7 是顏色1和顏色2之間漸變的區(qū)域,0.7到1是顏色2和顏色3之間漸變的區(qū)域。那么還有個(gè)0-0.1區(qū)域呢?該區(qū)域是顏色1。
locations={[ 0, 0.5, 0.8]},則0-0.5是顏色1和顏色2漸變區(qū)域,0.5-0.8是顏色2和顏色3的漸變區(qū)域,而0.8-1區(qū)域的顏色是顏色3。
設(shè)置旋轉(zhuǎn)角度
<LinearGradient
colors={['red', '#375BB1']}
useAngle={true}// 開啟旋轉(zhuǎn)
angle={90}// 旋轉(zhuǎn)角度,0的時(shí)候?yàn)閺南碌缴蠞u變,按照角度順時(shí)針旋轉(zhuǎn)
angleCenter={{ x: 0.5, y: 0.5}}// 旋轉(zhuǎn)中心
style={{ height: 50, marginTop: 50 }}> <View style={{ justifyContent: 'center', alignItems: 'center', height: 50 }}>
<Text style={{ color: '#ffffff', fontSize: 28 }}>Test Screen</Text>
</View></LinearGradient>
感謝各位的閱讀,以上就是“react native如何設(shè)置頁(yè)面背景色”的內(nèi)容了,經(jīng)過(guò)本文的學(xué)習(xí)后,相信大家對(duì)react native如何設(shè)置頁(yè)面背景色這一問(wèn)題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。