View 組件是React Native最基本的組件.絕大部分其他React Native 組件.

View組件的顏色和邊框

backgroundColor 鍵用來指定顏色. RN 0.19版本開始,只有Text和TextInput組件會(huì)繼承父組件的背景顏色

Opacity鍵定義了View組件的透明度, 取值0-1, 0表示完全透明

borderStyle鍵用來設(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è)用法比較有用

來看看示例代碼:

... 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組件的視覺效果

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ù)值類型,通過在組件周圍渲染陰影讓用戶產(chǎn)生一種組件懸浮在手機(jī)屏幕上的視覺效果.

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)部形狀無關(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框架通過這個(gè)屬性的值回調(diào)這個(gè)函數(shù), 為了簡(jiǎn)潔, 我們直接將提供的函數(shù)稱為A組件的回調(diào)函數(shù)，這個(gè)屬性B稱為回調(diào)函數(shù)類型的屬性, 比如我們之前接觸過的 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屬性

轉(zhuǎn)載于:https://www.cnblogs.com/hehe520/p/6329893.html

總結(jié)

以上是生活随笔為你收集整理的从零学React Native之07View的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。