React Native flexBox布局（一）

序：

    布局想必大家都知道，在iOS 中我们使用代码计算屏幕宽高布局，使用Autoresizing和AutoLayout进行布局。在web中的布局一般都是依靠CSS的盒子模型，09年W3C提出了一种新的布局方案，Flex布局。ReactNative就是选用了这种布局方式。下面我们来看下FlexBox布局吧。

1、FlexBox是什么

Flex 是Flexible Box的缩写，字面上的意思就是弹性盒子。意为“弹性布局”，用来为盒状模型提供最大的灵活性。

• flexible（形容词）：能够伸缩或者很容易变化，以适应外界条件的变化
• box（名词）：通用的矩形容器

   跟iOS AutoLayout比，我认为FlexBox的主要特点就是容器的子集可以根据容器的大小按比分配，还有丰富的对齐方式。

2、FlexBox基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

3、容器的属性

以下4个属性设置在容器上,阮一峰老师介绍的进行了筛检，只写现在可用的几个

• flexDirection
  
• flexWrap
• justifyContent
• alignItems

3.1 flexDirection属性

    flexDirection属性决定主轴的方向（即项目的排列方向）。

    主要四个属性值：

• row    主轴方向为横向，从左到
• row-reverse   横向，反方向
• column            竖向,自上向下
• column-reverse  竖向，自下向上

import React, { Component } from 'react';
import {
   AppRegistry,
  Image,
  ListView,
  StyleSheet,
  Text,
  View,
} from 'react-native';


class RNHybrid extends Component {

  render() {
    return(
        <View> //切换flexDirection属性看结果
        <View style={{backgroundColor:'red',width:100,height:40,marginTop:100}}>
        </View>
        <View style={{backgroundColor:'yellow',width:100,height:40,marginTop:100}}>
        </View>
        <View style={{backgroundColor:'blue',width:100,height:40,marginTop:100}}>
        </View>
        </View>
      );
  }
}

AppRegistry.registerComponent('RNHybrid', () => RNHybrid);

1.默认是column效果如下:

2. column   最外层View的属性加上style={{flexDirection:'column-reverse'}}  翻转了效果如下：

下面属性的就不贴了，自己试试就知道了。

3.2 flexWrap属性

如果我们的主轴为横向正向，那么我们的子控件排不开了怎么办？会自动换行吗？

代码是把上面的View宽度都变成三个加一块能超过屏幕的宽度，我的模拟器是6s，我让三个子View宽度为150。

观察demo看下答案：

默认flexWrap属性是不换行，下面来学习下这个属性。

flexWrap: nowrap | wrap | wrap-reverse

wrap换行效果：

3.3 justifyContent属性

justifyContent属性定义了项目在主轴上的对齐方式。(自己试验是在横轴上)

  justifyContent: flex-start | flex-end | center | space-between | space-around;

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

3.4 alignItems属性

alignItems属性定义项目在交叉轴上如何对齐。

  alignItems: flex-start | flex-end | center | baseline | stretch;

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

4、元素的属性

• alignSelf
• flexGrow
• flexShrink
• flexBasis
• flex

4.1 alignSelf属性

alignSelf: auto | flex-start | flex-end | center | baseline | stretch;

import React, { Component } from 'react';
import {
   AppRegistry,
  Image,
  ListView,
  StyleSheet,
  Text,
  View,
} from 'react-native';


class RNHybrid extends Component {

  render() {
    return(
        <View style={{flexDirection:'row',justifyContent:'space-around',alignItems:'flex-start'}}>
        <View style={{backgroundColor:'red',width:30,height:30,marginTop:100,alignSelf:'flex-end'}}>
        </View>
        <View style={{backgroundColor:'yellow',width:30,height:40,marginTop:100}}>
        </View>
        <View style={{backgroundColor:'blue',width:30,height:50,marginTop:100}}>
        </View>
        </View>
      );
  }
}

AppRegistry.registerComponent('RNHybrid', () => RNHybrid);

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

 代码：

render() {
    return(
        <View style={{flexDirection:'row',justifyContent:'space-around',alignItems:'flex-start'}}>
        <View style={{backgroundColor:'red',width:30,height:30,marginTop:100,flexGrow:1}}>
        </View>
        <View style={{backgroundColor:'yellow',width:30,height:40,marginTop:100,flexGrow:2}}>
        </View>
        <View style={{backgroundColor:'blue',width:30,height:50,marginTop:100,flexGrow:1}}>
        </View>
        </View>
      );
  }

总结：我们可以看出，这个属性不受原来宽度的限制，从新按比例分配。

注意：如果第一个红色View控件该属性为0或者没有该属性，其他两个View拥有该属性，那么这个View会把这行红色View所占空间剩下的空间按比例分配。如Demo2

Demo2:

代码：

return(
        <View style={{flexDirection:'row',justifyContent:'space-around',alignItems:'flex-start'}}>
        <View style={{backgroundColor:'red',width:250,height:30,marginTop:100}}>
        </View>
        <View style={{backgroundColor:'yellow',width:30,height:40,marginTop:100,flexGrow:2}}>
        </View>
        <View style={{backgroundColor:'blue',width:30,height:50,marginTop:100,flexGrow:1}}>
        </View>
        </View>
      );

4.3 flexShrink属性

return(
        <View style={{flexDirection:'row',justifyContent:'space-around',alignItems:'flex-start'}}>
        <View style={{backgroundColor:'red',width:100,height:30,marginTop:100,flexShrink:0}}>
        </View>
        <View style={{backgroundColor:'yellow',width:200,height:40,marginTop:100,flexShrink:1}}>
        </View>
        <View style={{backgroundColor:'blue',width:200,height:50,marginTop:100,flexShrink:0}}>
        </View>
        </View>
      );

render() {
    return(
        <View style={{flexDirection:'row',alignItems:'flex-end'}}>
        <View style={{backgroundColor:'red',width:200,height:30,marginTop:100,flexShrink:1}}>
        </View>
        <View style={{backgroundColor:'yellow',width:200,height:40,marginTop:100,flexBasis:350}}>
        </View>
        <View style={{backgroundColor:'blue',width:200,height:50,marginTop:100,flexShrink:1}}>
        </View>
        </View>
      );
  }

render() {
    return(
        <View style={{flexDirection:'row',alignItems:'flex-end'}}>
        <View style={{backgroundColor:'red',width:200,height:30,marginTop:100,flex:1}}>
        </View>
        <View style={{backgroundColor:'yellow',width:200,height:40,marginTop:100,flex:2}}>
        </View>
        <View style={{backgroundColor:'blue',width:200,height:50,marginTop:100,flex:3}}>
        </View>
        </View>
      );
  }