Props 屬性
簡而言之就是屬性 , 栗子 : Image中的source就是一個Props 像ImageView中的src一樣 只是叫的名字不一樣而已 ;
State 屬性
相較Props屬性而言 , State屬性是可變的 , 可以在程序中通過setState來動態改變值的屬性 , Props屬性 , 只要在js||xml||html等靜態頁面中寫死的 , 就無法改變 , 而State屬性是可以改變的 ;
Style 樣式 <樣式需要引入StyleSheet >
和CSS一樣 , 只是聲明的方式變爲了
const styleName = StyleSheet.create({
style1:{
color:#FFFFFF;
font-size:30px;
},
style2:{
... : ...,
... : ...
}
});
同時 , 引用方式變爲了 :
<Text style="{styleName.style1}"/>
// 或者
<Text style="{[styleName.style1 styleName.style2] }">
尺寸
React_Native 中的尺寸沒有單位<例如 px dp rem> , 尺寸只有數字 , 這個數字適合密度相關的邏輯數字 &^%^&()*!&!@... 總之一堆解釋 , 就是說尺寸沒有單位
Flex佈局方式
Flex 自適應 類似LinearLayout中的Weigh(權重) , 指定Flex :num , 就可以指定權重了...
FlexDirection屬性 類似LinearLayout中的orientation(row= horizontal, column= vertical ) ,當Flex被指定時 , 對應的另一個方向如果不指定尺寸, 會默認佔滿屏幕, 例如 :
<View style={{flexDirection : "row" , flex : 1}}>
<View style={{flex:1,backgroundColor:"#FF00FF"}}></View>
<View style={{flex:1,backgroundColor:"#FF0000"}}></View>
</View>
形成的界面就是左右平分 , 且上下充滿屏幕的界面 :
在此狀態下 高度只可以指定的 但是flex和width不能共存, row狀態的flex會使width不生效, 當flexDirection爲column時 , 道理也一樣;
JustifyContent 是指在子元素沒有填充滿父元素的情況下 , 決定對其方式的一個屬性 , 該屬性一共有5個屬性值 , 以下代碼在不同屬性值得情況下 , 佈局效果 :
<View style={{flexDirection : "row" , flex : 1,justifyContent:"flex-start"}}>
<View style={{flex:0.1,height:100,backgroundColor:"#0000FF"}}></View>
<View style={{flex:0.1,height:100,backgroundColor:"#FF0000"}}></View>
<View style={{flex:0.1,height:100,backgroundColor:"#00FF00"}}></View>
</View>
|
JustifyContent屬性值 |
flex-start(默認) |
center |
flex-end |
space-around | space-between |
|
樣式演示 |
|
|
|
|
|
AlignItems 是指在次軸方向上 子元素的排列方式 , 例如 flexDirection爲 row 時 , 主軸爲X軸 , 次軸爲Y軸 , 也就是說 指定alignItems屬性 , 就可以指定子元素沿Y軸的排列方式了...有點繞 , 代碼例子 :
// center flex-start flex-end stretch
<View style={{flexDirection : "row" , flex : 1,justifyContent:"space-between",alignItems: 'flex-start'}}>
<View style={{flex:0.1,height:100, backgroundColor:"#0000FF"}}></View>
<View style={{flex:0.1,height:100, backgroundColor:"#FF0000"}}></View>
<View style={{flex:0.1,height:100, backgroundColor:"#00FF00"}}></View>
</View>
|
AlignItems屬性值 |
flex-start(默認①) |
center |
flex-end |
stretch(默認②) |
|
樣式演示 |
|
|
|
|
AlignItems 說明 :
-
flex-start center flex-end 屬性值生效條件爲次軸上的尺寸設置爲死值 , 此處爲 height:100 ;
-
在子元素次軸尺寸爲死值時 , 默認的AlignItems屬性爲flex-start 爲默認①
-
stretch (拉伸) 屬性值的生效條件爲子元素次軸尺寸不設置 , 也就是說 代碼應該變爲
// center flex-start flex-end stretch
<View style={{flexDirection : "row" , flex : 1,justifyContent:"space-between",alignItems: ' stretch'}}>
<View style={{flex:0.1, backgroundColor:"#0000FF"}}></View>
<View style={{flex:0.1, backgroundColor:"#FF0000"}}></View>
<View style={{flex:0.1, backgroundColor:"#00FF00"}}></View>
</View>
-
才能出現對應的效果 ,
-
在子元素次軸尺寸不設置時 , 默認的AlignItems屬性爲stretch 爲默認②