轉載請注明出處:王亟亟的大牛之路
先安利:https://github.com/ddwhan0123/Useful-Open-Source-Android
今天到新公司捯饬了一天,各類流程有點小小的麻煩,應該這幾天無法投産了,下午就找到時間繼續學習React Native,昨天講了個“權重”的概念,今天繼續研習布局這一塊
昨天提到的
flex
有小夥看的不太了解,這邊再解釋下
還是拿昨天的CSS的例子講一下
const styles=StyleSheet.create({
container:{
flex: ,
justifyContent: 'center',
alignItems: 'center',
},style2:{
backgroundColor: '#EEFCAF',
flex: ,
},style3:{
backgroundColor: '#F5FCFF',
flex: ,
}
});
我們的父控件 的flex值 為 1
然後 他有的2個子控件分别是2,和3
那對于整個螢幕而言隻有一個”root layout”,裡面2個子View ,把root layout拆成了5份,他們2:3開拆分了整個視圖
這麼說了解了嗎?
接下來再說下 alignSelf屬性
align-self 屬性規定靈活容器内被選中項目的對齊方式。
auto 預設值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"。
stretch 元素被拉伸以适應容器。
center 元素位于容器的中心。
flex-start 元素位于容器的開頭。
flex-end 元素位于容器的結尾。
baseline 元素位于容器的基線上。
initial 設定該屬性為它的預設值。
inherit 從父元素繼承該屬性。
參考位址:http://www.ziqiangxuetang.com/cssref/css3-pr-align-self.html
我們把昨天的代碼再改一改
我們搞 4個 Text 進去
class WjjPro extends Component {
render(){
return(
<View style={styles.style1}>
<View style={[styles.style2,]}>
<Text>
預設位置
</Text>
</View>
<View style={[styles.style2,styles.style3]}>
<Text>
中間
</Text>
</View>
<View style={[styles.style2,styles.style4]}>
<Text>
最左邊
</Text>
</View>
<View style={[styles.style2,styles.style5]}>
<Text>
最右邊
</Text>
</View>
</View>
);
}
}
然後調用不同的css
const styles=StyleSheet.create({
style1:{
flex: ,
borderWidth: ,
},
style2:{
borderColor: 'blue',
borderWidth: ,
width: ,
height: ,
},
style3:{
width: ,
height: ,
alignSelf:'center',
},
style4:{
width: ,
height: ,
alignSelf:'flex-start',
},
style5:{
width: ,
height: ,
alignSelf:'flex-end',
},
});
這部分就沒有權重的問題了,就依次排下來,然後按照指定的長寬呈現就好
效果如下
類似于Android 的相對布局
源碼位址:https://github.com/ddwhan0123/ReactNativeDemo
下載下傳位址:https://github.com/ddwhan0123/ReactNativeDemo/archive/master.zip