此篇講解flex布局系列。
在React Native中,我們使用flexBox布局來適配頁面,這個寫法和CSS有些相似钉嘹。有前端基礎的同學應該會比較快掌握。
其中flexDirection
和alignItems
鲸阻,justifyContent
三個屬性比較重要隧期,一般的界面布局使用這三個組合都能滿足。iOS開發(fā)我們之前都是使用autolayout來進行UI界面的約束赘娄。引入flex布局后,我們則不需要autoLayout來進行了宏蛉,界面都可以使用js文件配合樣式表來操作遣臼,是不是有方便呢。下面我們通過簡單的demo操作來了解下flex布局拾并。
下面demo學習揍堰,借鑒來源于React-Native中文網(wǎng)的這篇文章鹏浅,我覺得講解的很簡單明了,借鑒一下屏歹。
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class AlignItemsBasics extends Component {
render() {
return (
// 嘗試把`alignItems`改為`flex-start`看看
// 嘗試把`justifyContent`改為`flex-end`看看
// 嘗試把`flexDirection`改為`row`看看
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
};
AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);
大家可以將其中的flexDirection
隐砸,justifyContent
,alignItems
修改屬性值,來查看下效果蝙眶。
開始效果應該是這樣:
屬性介紹:
Flex Direction:決定元素布局的主軸季希。
justifyContent:控制子元素是應該靠近主軸的起始端還是末尾段、環(huán)繞等方式幽纷。
Align Items:子元素沿著次軸(與主軸垂直的軸式塌,比如若主軸方向為row,則次軸方向為column)的排列方式友浸。
有這些值:
flexDirection?: "row" | "column" | "row-reverse" | "column-reverse">
justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around"
Align Items:"flex-start" | "flex-end" | "center" | "stretch" | "baseline";
只看描述可能不清晰峰尝,大家可以將上述代碼在空項目中運行一下,手動修改下屬性值收恢,就能加深理解flex布局了武学,這個demo比較簡單,就不上傳了伦意,新建個項目火窒,index.ios.js里粘貼上述代碼即可。