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'

效果图：