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',subViewStyle3: {
            backgroundColor:'green',});

效果图：

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,// 设置换行的方式
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'

效果图：

React-native FlexBox初识

相关文章