React Native flexBox布局（一）

星宇大前端

发布于 2019-01-15 14:52:36

9770

发布于 2019-01-15 14:52:36

序：

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

1、FlexBox是什么

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

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

FlexBox布局的理解：

跟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 竖向，自下向上

下面有一段demo，分别设置四个属性看下结果：

代码如下：

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属性允许单个项目有与其他项目不一样的对齐方式，可覆盖alignItems属性。默认值为auto，表示继承父元素的alignItems属性，如果没有父元素，则等同于stretch。

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

应用demo：

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);

效果：

其他效果可以修改属性尝试。

4.2 flexGrow属性

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属性

flexShrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

代码：

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>
      );

效果：

总结:不难看出，flexShrink属性值是1的时候代码，空间不足的时候缩放，flexShrink 0的时候不缩放。

4.4 flexBasis属性

flexBasis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

代码:

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>
      );
  }

效果:

4.5 flex属性

flex属性，我认为对于弹性布局是一个很重要的属性，以后应用较多。

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

代码：

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>
      );
  }

效果：