作為創(chuàng)建UI時(shí)最基礎(chǔ)的組件,View是一個(gè)支持Flexbox布局、樣式、一些觸摸處理和一些無(wú)障礙功能的容器,并且它可以放到其它的視圖里,也可以有任意多個(gè)任意類型的子視圖。不論在什么平臺(tái)上,View都會(huì)直接對(duì)應(yīng)一個(gè)平臺(tái)的原生視圖,無(wú)論它是UIView、<div>還是android.view。
<View style={{flexDirection: 'row', height: 100, padding: 20}}>
<View style={{backgroundColor: 'blue', flex: 0.3}} />
<View style={{backgroundColor: 'red', flex: 0.5}} />
<MyCustomComponent {...customProps} />
</View>
View的設(shè)計(jì)初衷是和StyleSheet搭配使用,這樣可以使代碼更清晰并且獲得更高的性能。盡管內(nèi)聯(lián)樣式也同樣可以使用,我們推薦使用StyleSheet,這樣的話,代碼在結(jié)構(gòu)上會(huì)更加的清晰、也有利于后期維護(hù)。
View組件中常見的屬性
Transforms 動(dòng)畫屬性
backfaceVisibility enum('visible', 'hidden') 定義界面翻轉(zhuǎn)的時(shí)候是否可見
backgroundColor color
borderBottomColor color
borderBottomLeftRadius number
borderBottomRightRadius number
borderBottomWidth number
borderColor color
borderLeftColor color
borderLeftWidth number
borderRadius number
borderRightColor color
borderRightWidth number
borderStyle enum('solid', 'dotted', 'dashed')
borderTopColor color
borderTopLeftRadius number
borderTopRightRadius number
borderTopWidth number
borderWidth number
opacity number 設(shè)置透明度,取值從0-1;
overflow enum('visible', 'hidden') 設(shè)置內(nèi)容超出容器部分是顯示還是隱藏;
elevation number 高度 設(shè)置Z軸,可產(chǎn)生立體效果。