基本樣式
1 )
backfaceVisibility:visible|hidden;屬性定義當(dāng)元素不面向屏幕時是否可見
backgroundColor:背景色
transform
transformMatrix
2)定位
position:定位：相對定位(absolute)，絕對定位(relative) 默認(rèn)情況下使用的是相對定位
top:上
bottom:下
left:左
right:右
3)圖像變換
scaleX :水平方向縮放
scaleY :垂直方向縮放
rotation :旋轉(zhuǎn)
translateX :水平方向平移
translateY :水平方向平移
4)陰影
shadowColor
shadowOffset
shadowOpacity
shadowRadius
5)圖片相關(guān)屬性
resizeMode:enum('cover','contain','stretch') contain是指無論如何圖片都包含在指定區(qū)域內(nèi)，假設(shè)設(shè)置的寬度高度比圖片大，則圖片居中顯示，否則，圖片等比縮小顯示
overflow:enum('visible','hidden')
tintColor:著色，rgb字符串類型
opacity:透明度
6)字體相關(guān)屬性
color:字體顏色
fontFamily:字體族
fontSize:字體大小
fontStyle:字體樣式,正常,傾斜，值為enum('normal','italic')
fontWeight:字體粗細(xì)，值為enum('normal','bold','100','200'...,'900')
letterSpacing:字符間隔
lineHeight:行高
textAlign:字體對齊方式,值為enum('auto','left','right','center','justify')
textDecorationColor:貌似沒效果，修飾的線的顏色
textDecorationLine:貌似沒效果，字體修飾，上劃線，下劃線，刪除線，無修飾，值為enum("none",'underline','line-through','underline line-through')
textDecorationStyle:enum("solid",'double','dotted','dashed')貌似沒效果，修飾的線的類型
writingDirection:enum("auto",'ltr','rtl')不知道什么屬性，寫作方向？從左到右？從右到左？
7)邊框相關(guān)
borderStyle:邊框樣式
borderWidth:所有邊框?qū)挾?br>
borderTopWidth:頂部邊框?qū)挾?br>
borderBottomWidth:底部邊框?qū)挾?br>
borderLeftWidth:左邊邊框?qū)挾?br>
borderRightWidth:右邊框?qū)挾?br>
borderColor:邊框顏色
borderTopColor:頂部邊框顏色
borderBottomColor:底部邊框顏色
borderLeftColor:左邊邊框顏色
borderRightColor:右邊邊框顏色
8)邊框圓角
borderRadius
borderBottomLeftRadius
borderBottomRightRadius
borderTopLeftRadius
borderTopRightRadius
9)Flex布局相關(guān)
flex:number
flexDirection: enum('row','column','row-reverse','column-reverse') 屬性決定主軸的方向（即項目的排列方向）。
flexWrap:enum('wrap','nowrap','wrap-reverse') 默認(rèn)情況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
alignItems:enum('flex-start','flex-end','center','stretch') 屬性定義項目在交叉軸上如何對齊。
alignSelf:enum('auto','flex-start','flex-end','center','stretch') 屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋
justifyContent:enum('flex-start','flex-end','center','space-between','space-around') 屬性定義了項目在主軸上的對齊方式。
10)外邊距
marginTop:上
marginBottom:下
marginLeft:左
marginRight:右
margin:相當(dāng)于同時設(shè)置四個
marginVertical:相當(dāng)于同時設(shè)置marginTop和marginBottom
marginHorizontal:相當(dāng)于同時設(shè)置marginLeft和marginRight
11)內(nèi)邊距
paddingTop:上
paddingBottom:下
paddingLeft:左
paddingRight:右
padding:相當(dāng)于同時設(shè)置四個
paddingVertical:相當(dāng)于同時設(shè)置paddingTop和paddingBottom
paddingHorizontal:相當(dāng)于同時設(shè)置paddingLeft和paddingRight
12)顏色漸變
1.安裝
yarn add react-native-linear-gradient
react-native link react-native-linear-gradient
2.
// 引用官網(wǎng)的例子
import LinearGradient from 'react-native-linear-gradient';
react-native-linear-gradient有兩個屬性
默認(rèn)情況下，漸變色的方向是從上向下的，假如你想漸變色從左向右，或者斜角漸變，就需要設(shè)置下了
start:{ x: number, y: number }
end:{ x: number, y: number }
例如：
start: { x: 0.3, y: 0.4 } 漸變是從 左側(cè)30%， 上部 40% 開始
end: { x: 0.7, y: 0.8 } 漸變是從 左側(cè)70%， 上部 80% 結(jié)束
<LinearGradient
start={{x: 0.25, y: 0.25}} end={{x: 0.75, y: 0.75}}
colors={['red', 'green', 'black']}
style={{height: 150, flex: 1}}>
</LinearGradient>
//start 就是漸變開始的位置，x、y 范圍是 0 - 1 ，
//end 同上，就是漸變結(jié)束的位置
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
<Text style={styles.buttonText}>
Sign in with Facebook
</Text>
</LinearGradient>
var styles = StyleSheet.create({
linearGradient: {
flex: 1,
paddingLeft: 15,
paddingRight: 15,
borderRadius: 5
},
buttonText: {
fontSize: 18,
fontFamily: 'Gill Sans',
textAlign: 'center',
margin: 10,
color: '#ffffff',
backgroundColor: 'transparent',
},
});
13)陰影
shadowColor —–陰影的顏色，顏色色值以rgba取色值
shadowOffset —-陰影的偏移量,{width:0, height:2}
shadowOpacity —設(shè)置陰影的不透明度
shadowRadius —-設(shè)置陰影的模糊半徑
elevation —–用于android用于設(shè)置陰影用的
shadowStyle: {
shadowColor: '#000',
shadowOffset: { width: 4, height: 4 },
shadowOpacity: 0.8,
shadowRadius: 6,
elevation: 10
}
shadowStyle: {
shadowColor: 'rgba(0, 0, 0, 0.05)',
shadowOffset: {
width: 0,
height: 2
},
shadowRadius: 2,
elevation: 4,
},
