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

View組件的顏色和邊框

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

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

borderStyle鍵用來設置邊框的風格,只能取值solid, dotted和dashed三個值之一,分別表示實線邊框,點狀邊框和虛線邊框, 默認值是solid

邊框顏色borderColor, 當然也可以拆分指定四個邊的顏色,如: borderTopColor

圓角邊框 borderRadius,也可以分別單獨設置四個角, 如左上角borderTopLeftRadius.
如果一個View寬高相等,值為2X, 將borderRadius的值設為X時,這個View顯示上會是一個圓, 這個用法比較有用

來看看示例代碼:

... 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'} }); ...

運行結果:

View組件的視覺效果

shadowColor,shadowOffset,shadowOpacity,shadowRadius是與陰影相關的樣式鍵,分別對應著組件的陰影顏色,陰影位移值,陰影透明度與陰影圓角率.

overflow鍵有兩個字符串類型的取值:visible和hidden。它定義了當View組件中的子組件寬高超出View組件寬高時的行為. 默認是hidden,即超出部分隱藏. 這個鍵只針對ios平臺有效,在Android平臺上永遠為hidden效果.

elevation是Android平臺特有的樣式鍵.數值類型,通過在組件周圍渲染陰影讓用戶產生一種組件懸浮在手機屏幕上的視覺效果.

View組件的變形

開發者可以利用transform樣式鍵設置實現組件的變形,從而實現文字或圖像的變形.變形包括: translate(平移) ,scale(縮放) , rotate(旋轉) , skew(傾斜)四種類型.

transform樣式鍵設置的格式是:

transform:[{perspective: number},{rotate: string},{rotateX:string},{rotateY: string},{scale: number},{scaleX: number},{scaleY: number},{translateX: number},{translateY: number}, {skewX: string},{skewY: string} ]

rotate控制目標整體旋轉,于目標內部形狀無關,目標內部不發生任何形變,而skew目標內部的形狀會隨傾斜而改變.
perspective元素與3D變形效果有關.

示例代碼:

... class AwesomeProject extends Component {render() {return (//根View<View style={styles.container}><Text style={styles.text1}>第一個Text</Text><Text style={styles.text2}>第二個Text</Text><Text style={styles.text3}>第三個Text</Text><Text style={styles.text4}>第四個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'}] // 旋轉45度},text2:{flex: 1,alignItems:'center',justifyContent:'center',transform:[{rotateX:'45deg'},{scale:2}] //x軸旋轉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倍} }); ...

運行結果:

回調函數

A組件有一個屬性B的值是函數的引用,當某一個事件發生時,React Native框架通過這個屬性的值回調這個函數, 為了簡潔, 我們直接將提供的函數稱為A組件的回調函數，這個屬性B稱為回調函數類型的屬性, 比如我們之前接觸過的 onPress 屬性就是這樣.

onLayout是View組件的回調函數, 當View組件被加載或者布局改變時,調用

onTouchStart, onTouchMove, onTouchEnd 分別在開始觸摸事件,觸摸點移動和觸摸結束時調用, 都會收到一個event對象參數， 在event對象結構中是:

{timeStamp : aNumber, //時間戳 , 1970年1月1日至今的毫秒數nativeEvent: {locationX: aNumber,locationY: aNumber} }

其他屬性

View的屬性還有很多, 比如 pointerEvents屬性, 大家可以參考我的另一篇文章React Native中pointerEvent屬性

轉載于:https://www.cnblogs.com/hehe520/p/6329893.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。