View 組件是React Native最基本的組件.絕大部分其他React Native 組件.
View組件的顏色和邊框
- backgroundColor 鍵用來(lái)指定顏色. RN 0.19版本開始,只有Text和TextInput組件會(huì)繼承父組件的背景顏色
- Opacity鍵定義了View組件的透明度, 取值0-1, 0表示完全透明
- borderStyle鍵用來(lái)設(shè)置邊框的風(fēng)格,只能取值solid, dotted和dashed三個(gè)值之一,分別表示實(shí)線邊框,點(diǎn)狀邊框和虛線邊框, 默認(rèn)值是solid
- 邊框顏色borderColor, 當(dāng)然也可以拆分指定四個(gè)邊的顏色,如: borderTopColor
- 圓角邊框 borderRadius,也可以分別單獨(dú)設(shè)置四個(gè)角, 如左上角borderTopLeftRadius.
如果一個(gè)View寬高相等,值為2X, 將borderRadius的值設(shè)為X時(shí),這個(gè)View顯示上會(huì)是一個(gè)圓, 這個(gè)用法比較有用
來(lái)看看示例代碼:
...
class AwesomeProject extends Component {
render() {
return (
//根View
<View style={styles.container}>
<View style={styles.view1}
opacity={0.5}/>
<View style={styles.view2}
opacity={1}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: { //根View樣式
flex: 1,
justifyContent:'space-around',// 子組件分散排列
alignItems:'center',
backgroundColor:'white'
},
view1:{
width:50,
height:50,
borderWidth:1,
borderColor:'green',
borderRadius:25,
backgroundColor:'red'
},
view2:{
width:50,
height:50,
borderWidth:2,
borderColor:'green',
borderRadius:25,
backgroundColor:'red'
}
});
...
運(yùn)行結(jié)果:
View組件的視覺(jué)效果
- shadowColor,shadowOffset,shadowOpacity,shadowRadius是與陰影相關(guān)的樣式鍵,分別對(duì)應(yīng)著組件的陰影顏色,陰影位移值,陰影透明度與陰影圓角率.
- overflow鍵有兩個(gè)字符串類型的取值:visible和hidden。它定義了當(dāng)View組件中的子組件寬高超出View組件寬高時(shí)的行為. 默認(rèn)是hidden,即超出部分隱藏. 這個(gè)鍵只針對(duì)ios平臺(tái)有效,在Android平臺(tái)上永遠(yuǎn)為hidden效果.
- elevation是Android平臺(tái)特有的樣式鍵.數(shù)值類型,通過(guò)在組件周圍渲染陰影讓用戶產(chǎn)生一種組件懸浮在手機(jī)屏幕上的視覺(jué)效果.
View組件的變形
開發(fā)者可以利用transform樣式鍵設(shè)置實(shí)現(xiàn)組件的變形,從而實(shí)現(xiàn)文字或圖像的變形.變形包括: translate(平移) ,scale(縮放) , rotate(旋轉(zhuǎn)) , skew(傾斜)四種類型.
transform樣式鍵設(shè)置的格式是:
transform:
[
{perspective: number},
{rotate: string},
{rotateX:string},
{rotateY: string},
{scale: number},
{scaleX: number},
{scaleY: number},
{translateX: number},
{translateY: number},
{skewX: string},
{skewY: string}
]
rotate控制目標(biāo)整體旋轉(zhuǎn),于目標(biāo)內(nèi)部形狀無(wú)關(guān),目標(biāo)內(nèi)部不發(fā)生任何形變,而skew目標(biāo)內(nèi)部的形狀會(huì)隨傾斜而改變.
perspective元素與3D變形效果有關(guān).
示例代碼:
...
class AwesomeProject extends Component {
render() {
return (
//根View
<View style={styles.container}>
<Text style={styles.text1}>
第一個(gè)Text
</Text>
<Text style={styles.text2}>
第二個(gè)Text
</Text>
<Text style={styles.text3}>
第三個(gè)Text
</Text>
<Text style={styles.text4}>
第四個(gè)Text
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: { //根View樣式
flex: 1,
justifyContent:'center',
alignItems:'center',
backgroundColor:'#F5FCFF'
},
text1:{
flex: 1,
alignItems:'center',
justifyContent:'center',
transform:[{rotate:'45deg'}] // 旋轉(zhuǎn)45度
},
text2:{
flex: 1,
alignItems:'center',
justifyContent:'center',
transform:[{rotateX:'45deg'},{scale:2}] //x軸旋轉(zhuǎn)45度 放大2倍
},
text3:{
flex: 1,
alignItems:'center',
justifyContent:'center',
transform:[{skewY:'45deg'}] //Y軸傾斜45度
},
text4:{
flex: 1,
alignItems:'center',
justifyContent:'center',
transform:[{scale:2},{translateX:50}] //X軸平移50 放大2倍
}
});
...
運(yùn)行結(jié)果:
回調(diào)函數(shù)
A組件有一個(gè)屬性B的值是函數(shù)的引用,當(dāng)某一個(gè)事件發(fā)生時(shí),React Native框架通過(guò)這個(gè)屬性的值回調(diào)這個(gè)函數(shù), 為了簡(jiǎn)潔, 我們直接將提供的函數(shù)稱為A組件的回調(diào)函數(shù)，這個(gè)屬性B稱為回調(diào)函數(shù)類型的屬性, 比如我們之前接觸過(guò)的 onPress 屬性就是這樣.
- onLayout是View組件的回調(diào)函數(shù), 當(dāng)View組件被加載或者布局改變時(shí),調(diào)用
- onTouchStart, onTouchMove, onTouchEnd 分別在開始觸摸事件,觸摸點(diǎn)移動(dòng)和觸摸結(jié)束時(shí)調(diào)用, 都會(huì)收到一個(gè)event對(duì)象參數(shù)， 在event對(duì)象結(jié)構(gòu)中是:
{
timeStamp : aNumber, //時(shí)間戳 , 1970年1月1日至今的毫秒數(shù)
nativeEvent: {
locationX: aNumber,
locationY: aNumber
}
}
其他屬性
View的屬性還有很多, 比如 pointerEvents屬性, 大家可以參考我的另一篇文章React Native中pointerEvent屬性
更多精彩請(qǐng)關(guān)注微信公眾賬號(hào)likeDev,公眾賬號(hào)名稱：愛(ài)上Android。
