React Native之View

作為創(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)生立體效果。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容