1、ReactNative中能使用的css樣式

"alignItems",
"alignSelf",
"backfaceVisibility",
"backgroundColor",
"borderBottomColor",
"borderBottomLeftRadius",
"borderBottomRightRadius",
"borderBottomWidth",
"borderColor",
"borderLeftColor",
"borderLeftWidth",
"borderRadius",
"borderRightColor",
"borderRightWidth",
"borderStyle",
"borderTopColor",
"borderTopLeftRadius",
"borderTopRightRadius",
"borderTopWidth",
"borderWidth",
"bottom",
"color",
"elevation",
"flex",
"flexDirection",
"flexWrap",
"fontFamily",
"fontSize",
"fontStyle",
"fontWeight",
"height",
"justifyContent",
"left",
"letterSpacing",
"lineHeight",
"margin",
"marginBottom",
"marginHorizontal",
"marginLeft",
"marginRight",
"marginTop",
"marginVertical",
"opacity",
"overflow",
"overlayColor",
"padding",
"paddingBottom",
"paddingHorizontal",
"paddingLeft",
"paddingRight",
"paddingTop",
"paddingVertical",
"position",
"resizeMode",
"right",
"rotation",
"scaleX",
"scaleY",
"shadowColor",
"shadowOffset",
"shadowOpacity",
"shadowRadius",
"textAlign",
"textAlignVertical",
"textDecorationColor",
"textDecorationLine",
"textDecorationStyle",
"textShadowColor",
"textShadowOffset",
"textShadowRadius",
"tintColor",
"top",
"transform",
"transformMatrix",
"translateX",
"translateY",
"width",
"writingDirection"

2、使用方式有

• 內連方式
  style={{flex:1,borderColor:'red'}}
• 包裹使用
  style={[styles.style1,styles.style2]}
• 同時包裹樣式和內連
  style={[styles.style1,{flex:1,borderWidth:1}]}
• 通過StyleSheet創建一個樣式表

var styles = StyleSheet.create({
style1: {
borderRadius: 5,
borderWidth: 1
, borderColor: 'grat'
},
style2: {
fontSize: 19,
fontWeight: 'bold'
}
});

3、ReactNative中主要的布局樣式

注：為了方便展示將結合backgroundColor(背景顏色)樣式進行演示

ReactNative中的組件是需要聲明大小的，如果未聲明則默認為包含子組件的大小

render() {
return ( <View style={{backgroundColor:"#F00"}}>
</View>
);}

如上圖，當我們沒有聲明組件的大小且沒有子組件時，該組件是不會被展示的

• weight、height
  width為寬度，height為高度

render() {
return (
<View style={{width:100,height:100,backgroundColor:"red"}}>
</View>
);}

如圖，當我們聲明了組件的大小，就能夠按指定大小進行展示了

• flex
  flex屬性能夠快速的填充父組件

render()
{
return (
<View style={{flex:1,backgroundColor:"red"}}>
</View>
);}

如圖，當使用flex屬性時，該組件就能夠快速的填充整個屏幕，但是，當有多個一級子組件同時使用flex屬性時，幾個子組件就會按權重分攤父組件的剩余大小，如下所示,黃色組件占80的高度，其余組件按1:1:2的比例分配剩余的高度

• flexDirection
  通過上訴演示應該會有個疑惑，為什么剛才的子組件是向下填充的？
  flex盒子中有個主軸的概念，主軸的方向則為子組織填充的方向，在ReactNative中，主軸默認為豎直方向，我們可以通過flexDirection樣式來改變主軸方向，如下所示

當然flexDirection還有row-reverse、colum-reverse即提供反轉顯示效果
如下為row-reverse效果

• flexWrap
  flexWrap屬性值有：wrap,nowrap

render() {
return (
<View style={{flexDirection:'row',flexWrap:'wrap',flex:1}}>
<View style={{width:180,height:200,backgroundColor:"yellow"}}/>
<View style={{width:180,height:200,backgroundColor:"blue"}}/>
<View style={{width:180,height:200,backgroundColor:"green"}}/>
</View>
);}

當使用“wrap”時，會將子組件內容都展現出來，當位置不足時會自動跳轉到下一行展示

render() {
return (
<View style={{flexDirection:'row',flexWrap:'nowrap',flex:1}}>
<View style={{width:180,height:200,backgroundColor:"yellow"}}/>
<View style={{width:180,height:200,backgroundColor:"blue"}}/>
<View style={{width:180,height:200,backgroundColor:"green"}}/>
</View>
);}

當使用“nowrap”時所有子組件將在一行展示，超出則不展示

• justifyContent
  justifyContent屬性值有flex-start,flex-end,center,space-around,space-between,其效果分別如下圖所示；
  space-around是在子組件的兩邊和中間均勻插入間隔，而space-between則是兩邊組件頂邊，中間均勻插入間隔

render() {
return (
<View style={{flexDirection:'row',justifyContent:'space-start',flex:1}}>
<View style={{width:50,height:200,backgroundColor:"yellow"}}/>
<View style={{width:100,height:200,backgroundColor:"blue"}}/>
<View style={{width:50,height:200,backgroundColor:"green"}}/>
<View style={{width:50,height:200,backgroundColor:"red"}}/> </View>
);}

flex-start

flex-end

center

space-around

space-between

• alignItems
  前文提到主軸的概念是指子組件布局的方向，輔軸即為主軸垂直90度的方向
  justifyContent是用來控制子布局在主軸位置展示的，而alignItems是用來控制輔軸位置展示的，其值有auto,center,flex-end,flex-start,stretch

render() {
return (
<View style={{flexDirection:'row',alignItems:'center',flex:1}}>
<View style={{width:50,height:200,backgroundColor:"yellow"}}/>
<View style={{width:100,height:200,backgroundColor:"blue"}}/>
<View style={{width:50,height:200,backgroundColor:"green"}}/>
<View style={{width:50,height:200,backgroundColor:"red"}}/>
</View>
);}

center

flex-end

_本站文章為 寶寶巴士 SD.Team 原創，轉載務必在明顯處注明：（作者官方網站： 寶寶巴士 ) _轉載自【寶寶巴士SuperDo團隊】原文鏈接: http://www.lxweimin.com/p/06eaace83962