一:React 中view 的介紹
? ? 他是所有UI中的基礎(chǔ)的組件蓖议,是其他組件的父組件窃页,View是一個(gè)支持Flexbox布局俺榆、樣式赞枕、一些觸摸處理垮斯、容器刻获,他可以被包含和包含在其他容器中蜀涨,其作用等同于iOS中的UIView, Android中的android.view,或是網(wǎng)頁(yè)中的<div>標(biāo)簽
二:View與樣式的關(guān)聯(lián)分為內(nèi)聯(lián)式和外聯(lián)式将鸵。View的設(shè)計(jì)是和StyleSheet搭配使用勉盅,這樣可以使代碼更清晰并和獲得更高的性能:
三:view的基本屬性介紹
Flexbox 彈性布局
Transforms? 動(dòng)畫(huà)屬性
backfaceVisibility enum('visible', 'hidden')? ? 定義界面翻轉(zhuǎn)的時(shí)候是否可見(jiàn)
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)生立體效果痒筒。
四:組件的基本使用
? ?在圖中的render函數(shù)中宰闰,我們返回了一個(gè)頂層的View,然后View中包含著另一個(gè)子層的View簿透。
在頂層的View中的style屬性里面設(shè)置了其占滿父控件移袍,內(nèi)邊距為20,背景顏色為黃色 老充;對(duì)應(yīng)子層中的View的style屬性中設(shè)置了寬度100,高度10啡浊,背景色為藍(lán)色巷嚣。
五:在react開(kāi)發(fā)中,推薦組件和StyleSheet配合使用窘拯,這樣結(jié)構(gòu)上會(huì)更加的清晰涤姊、也有利于后期維護(hù)并且能夠獲得更高的性能砂轻。
? ?在實(shí)際的項(xiàng)目可以靈活的配套使用