React-native FlexBox初识

看到flexbox感觉非常不错,特记之，参考链接：http://www.cnblogs.com/miaomiaoshen/p/6006971.html

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Image,  Text,  View, } from 'react-native';// 导入Dimensions库var Dimensions = require('Dimensions');export default class firstProgram extends Component {  render() {    // var movie = MOCKED_MOVIES_DATA[0];    return (    <View style={styles.container}>                <View style={styles.subViewStyle1}></View>                <View style={styles.subViewStyle2}></View>                <View style={styles.subViewStyle3}></View>        </View>    );  }} // 样式  const styles = StyleSheet.create({        container: {            backgroundColor:'blue',            height:Dimensions.get('window').height,            width:Dimensions.get('window').width,             // 设置主轴方向            flexDirection:'row'        },        subViewStyle1: {            backgroundColor:'red',            height:60,            width:60,        },        subViewStyle2: {            backgroundColor:'yellow',            height:60,            width:60,        },        subViewStyle3: {            backgroundColor:'green',            height:60,            width:60,        },  });

效果图：

FlexBox的属性：

• flexDirection（该属性决定了项目排列的方向，也就是主轴的方向）
  
  • row：主轴为水平方向，起点在左端

 // 设置主轴方向 flexDirection:'row'

效果图：

• row-reverse：主轴为水平方向，起点在右端

 // 设置主轴方向 flexDirection:'row-reverse'

效果图：

• column（默认）：主轴为垂直方向，起点在上

// 设置主轴方向flexDirection:'column'

效果图：

- column-reverse：主轴为垂直方向，起点在下

// 设置主轴方向flexDirection:'column-reverse'

效果图：

---

• justifyContent（定义伸缩项目在主轴线的对齐方式）
  
  • flex-start（默认）：伸缩项目向一行的起始位置靠齐

// 设置子项目在主轴上的对齐方式justifyContent:'flex-start'

效果图：

• flex-end：伸缩项目向一行的结束位置靠齐

// 设置子项目在主轴上的对齐方式justifyContent:'flex-end'

效果图：

• center：伸缩项目向一行的中间位置靠齐

// 设置子项目在主轴上的对齐方式justifyContent:'center'

效果图：

• space-between：两端对齐，项目之间的间隔都相等

// 设置子项目在主轴上的对齐方式justifyContent:'space-between'

效果图：

• space-around：伸缩项目会平均分布在行内，两端保留一半的空间

// 设置子项目在主轴上的对齐方式justifyContent:'space-around'

效果图：

---

• alignItems（定义项目在交叉轴上如何对齐，可以把它看成侧轴（垂直于主轴）的对齐方式）
  
  • flex-start（默认）：侧轴轴的起点对齐

 // 设置项目在侧轴上如何对齐 alignItems:'flex-start'

效果图：

• flex-end：

 // 设置项目在侧轴上如何对齐 alignItems:'flex-end'

效果图：

• center：侧轴的中点对齐

 // 设置项目在侧轴上如何对齐 alignItems:'flex-center'

效果图：

- stretch（默认):如果项目没有设置高度或设置为 auto，将占满整个容器高度

 // height:Dimensions.get('window').height, // width:Dimensions.get('window').width,     // 设置项目在侧轴上如何对齐 alignItems:'flex-stretch'

效果图：

• flexWrap（默认情况下，项目都排在一条轴线上，flex-wrap属性定义如果一条轴线排不下，如何换行）
  
  • nowrap（默认）：不换行

<View style={styles.container}>  <View style={styles.subViewStyle1}></View>  <View style={styles.subViewStyle2}></View>  <View style={styles.subViewStyle3}></View>  <View style={styles.subViewStyle1}></View>  <View style={styles.subViewStyle2}></View>  <View style={styles.subViewStyle3}></View>  <View style={styles.subViewStyle1}></View>  <View style={styles.subViewStyle2}></View>  <View style={styles.subViewStyle3}></View></View>

height:Dimensions.get('window').height,width:Dimensions.get('window').width,// 设置主轴方向flexDirection:'row',// 设置换行的方式flexWrap:'nowrap'

效果图：

• wrap：换行，第一行在上方

height:Dimensions.get('window').height,width:Dimensions.get('window').width,// 设置主轴方向flexDirection:'row',// 设置换行的方式flexWrap:'wrap'

效果图：

---

• alignSelf（允许单个项目有与其它项目不一样的对齐方式，可覆盖 align-items属性）
  
  • auto(默认)：继承父元素的alignItems属性，如果没有则切换为stretch

 alignSelf:'auto'

效果图：

• flex-start：项目从侧轴的起点开始

 alignSelf:'flex-start'

效果图：

- flex-end：项目从侧轴的终点开始

 alignSelf:'flex-end'

效果图：

- center：项目以侧轴的中心为参照

 alignSelf:'center'

效果图：

- stretch

 alignSelf:'stretch'

效果图：