[深入剖析React Native]React Native Flexbox屬性講解_flex

React Native通過一個基於Flexbox的布局引擎，在所有移動平台上實現了一致的跨平台樣式和布局方案。 主要屬性 flex flexDirection alignSelf alignItems justifyContent flexWrap 屬性講解 flex

當一個元素定義了flex屬性時，表示該元素是可伸縮的（flex的屬性值大於0的時候才可伸縮），可以把它類比成android中的weight屬性。

class FlexboxReact extends Component {  render() {    return (      <View style={styles.container}>        <View style={styles.flex_style_1}><Text>佔1/6</Text></View>        <View style={styles.flex_style_2}><Text>佔1/3</Text></View>        <View style={styles.flex_style_3}><Text>佔1/2</Text></View>      </View>    );  }}const styles = StyleSheet.create({  container: {    flex: 1,  },  flex_style_1: {    flex: 1,    backgroundColor: 'red'  },  flex_style_2: {    flex: 2,    backgroundColor: 'white'  },  flex_style_3: {    flex: 3,    backgroundColor: 'blue'  },});

效果圖：
flexDirection

flexDirection在React Native中只有兩個屬性值，row（橫向伸縮）和column（縱向伸縮），預設為column：

class FlexboxReact extends Component {  render() {    return (      <View style={styles.container}>        <View style={styles.flex_style_1}><Text>佔1/6</Text></View>        <View style={styles.flex_style_2}><Text>佔1/3</Text></View>        <View style={styles.flex_style_3}><Text>佔1/2</Text></View>      </View>    );  }}const styles = StyleSheet.create({  container: {    flex: 1,    flexDirection: 'row',  },  flex_style_1: {    flex: 1,    backgroundColor: 'red'  },  flex_style_2: {    flex: 2,    backgroundColor: 'white'  },  flex_style_3: {    flex: 3,    backgroundColor: 'blue'  },});

上面代碼僅僅修改了container樣式：

  container: {    flex: 1,    flexDirection: 'row',  },

效果圖：
alignSelf

這個用法跟alignItems的很像，只是它用於單個組件alignSelf的對齊, 即該屬性用來設定單獨組件的豎直對齊，主要有四種：flex-start、flex-end、center、auto、stretch： flex-start：與父容器首部對齊 flex-end：flex-end:與父容器尾部對齊 center：位於垂直位置 auto：按照自身設定的寬高來顯示，如果沒設定，效果跟streth一樣 stretch：垂直展開

class FlexboxReact extends Component {  render() {    return (      <View style={styles.container}>        <View style={[styles.view, styles.alignSelf_flexstart]}><Text>flex-start</Text></View>        <View style={[styles.view, styles.alignSelf_flexend]}><Text>flex-end</Text></View>        <View style={[styles.view, styles.alignSelf_center]}><Text>center</Text></View>        <View style={[styles.view, styles.alignSelf_auto]}><Text>auto</Text></View>        <View style={[styles.view, styles.alignSelf_stretch]}><Text>stretch</Text></View>      </View>    );  }}const styles = StyleSheet.create({  container: {    flex: 1,  },  view: {    flex: 1,    backgroundColor: 'red',    borderWidth: 1,    borderColor: 'blue',  },  alignSelf_flexstart: {    alignSelf: 'flex-start',  },  alignSelf_flexend: {    alignSelf: 'flex-end',  },  alignSelf_center: {    alignSelf: 'center',  },  alignSelf_auto: {    alignSelf: 'auto',  },  alignSelf_stretch: {    alignSelf: 'stretch',  },});

alignItems

用於定義子組件在垂直方向上的對齊。有四個屬性可設定：flex-start，flex-end，center，stretch。
- flex-start:與父組件在垂直方向上的首部對齊
- flex-end:與父組件在垂直方向上的尾部對齊
- center:處於父容器在垂直方向上的中間位置
- stretch:在垂直方向上填充整個容器

class FlexboxReact extends Component {  render() {    return (      <View style={styles.container}>        <View style={[styles.view, styles.alignItems_flexstart]}>          <Text style={styles.subView}>flex-start</Text>        </View>        <View style={[styles.view, styles.alignItems_flexend]}>          <Text style={styles.subView}>flex-end</Text>        </View>        <View style={[styles.view, styles.alignItems_center]}>          <Text style={styles.subView}>center</Text>        </View>        <View style={[styles.view, styles.alignItems_stretch]}>          <Text style={styles.subView}>stretch</Text>        </View>      </View>    );  }}const styles = StyleSheet.create({  container: {    flex: 1,  },  view: {    flex: 1,  },  subView: {    width: 100,    height: 100,    backgroundColor: 'red',    borderWidth: 1,    borderColor: 'blue',  },  alignItems_flexstart: {    alignItems: 'flex-start',  },  alignItems_flexend: {    alignItems: 'flex-end',  },  alignItems_center: {    alignItems: 'center',  },  alignItems_stretch: {    alignItems: 'stretch',  },});

justifyContent

justifyContent和alignItems是相對的。它有五個屬性可以設定，分別是flex-start，flex-end，center，space-between，space-around。 flex-start:伸縮項目與父容器開始端點靠齊 flex-end:與父容器結尾端靠齊 center:水平置中 space-between:第一個子組件位於父容器開始端點，最後一個子組件位於父容器結尾端。然後平均分配在父容器水平方向上 space-around:所有子組件平均分配在父容器的相應方向上，子組件兩端都有留空隙

class FlexboxReact extends Component {  render() {    return (      <View style={styles.container}>        <View style={[styles.view, styles.justifyContent_flexstart]}>          <Text style={styles.subView}>Item 1</Text>          <Text style={styles.subView}>Item 2</Text>          <Text style={styles.subView}>Item 3</Text>        </View>        <View style={[styles.view, styles.justifyContent_flexend]}>          <Text style={styles.subView}>Item 1</Text>          <Text style={styles.subView}>Item 2</Text>          <Text style={styles.subView}>Item 3</Text>        </View>        <View style={[styles.view, styles.justifyContent_center]}>          <Text style={styles.subView}>Item 1</Text>          <Text style={styles.subView}>Item 2</Text>          <Text style={styles.subView}>Item 3</Text>        </View>        <View style={[styles.view, styles.justifyContent_between]}>          <Text style={styles.subView}>Item 1</Text>          <Text style={styles.subView}>Item 2</Text>          <Text style={styles.subView}>Item 3</Text>        </View>        <View style={[styles.view, styles.justifyContent_around]}>          <Text style={styles.subView}>Item 1</Text>          <Text style={styles.subView}>Item 2</Text>          <Text style={styles.subView}>Item 3</Text>        </View>      </View>    );  }}const styles = StyleSheet.create({  container: {    flex: 1,    flexDirection: 'row',  },  view: {    flex: 1,    borderWidth: 1,    borderColor: 'black',  },  subView: {    width: 50,    height: 50,    backgroundColor: 'red',    borderWidth: 1,    borderColor: 'blue',  },  justifyContent_flexstart: {    justifyContent: 'flex-start',  },  justifyContent_flexend: {    justifyContent: 'flex-end',  },  justifyContent_center: {    justifyContent: 'center',  },  justifyContent_between: {    justifyContent: 'space-between',  },  justifyContent_around: {    justifyContent: 'space-around',  },});

flexWrap

flexWrap用於設定是否可換行，有兩個屬性可設定nowrap和wrap。 nowrap:即使空間不夠也不換行，放不下的會衝出溢出螢幕 wrap:空間不夠的話自動換行

class FlexboxReact extends Component {  render() {    return (      <View style={styles.container}>        <View style={[styles.view, styles.flexWrap_nowrap]}>          <Text style={styles.subView}>Item 1</Text>          <Text style={styles.subView}>Item 2</Text>          <Text style={styles.subView}>Item 3</Text>          <Text style={styles.subView}>Item 4</Text>          <Text style={styles.subView}>Item 5</Text>          <Text style={styles.subView}>Item 6</Text>        </View>        <View style={[styles.view, styles.flexWrap_wrap]}>          <Text style={styles.subView}>Item 1</Text>          <Text style={styles.subView}>Item 2</Text>          <Text style={styles.subView}>Item 3</Text>          <Text style={styles.subView}>Item 4</Text>          <Text style={styles.subView}>Item 5</Text>          <Text style={styles.subView}>Item 6</Text>        </View>      </View>    );  }}const styles = StyleSheet.create({  container: {    flex: 1,  },  view: {    flex: 1,    flexDirection: 'row',    borderWidth: 1,    borderColor: 'black',  },  subView: {    width: 80,    height: 80,    backgroundColor: 'red',    borderWidth: 1,    borderColor: 'blue',  },  flexWrap_nowrap: {    flexWrap: 'nowrap',  },  flexWrap_wrap: {    flexWrap: 'wrap',  },});

轉載請標註地址：Geek馬走日
Follow個人Github : mazouri