React Native flexBox布局（一）

2019-01-15 14:52:36 浏览数 (5)

序：

    布局想必大家都知道，在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，分别设置四个属性看下结果：

代码如下：

代码语言：javascript复制
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。

代码语言：javascript复制
alignSelf: auto | flex-start | flex-end | center | baseline | stretch;

应用demo：

代码语言：javascript复制
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，即如果存在剩余空间，也不放大。

 代码：

代码语言：javascript复制
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:

代码：

代码语言：javascript复制
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，即如果空间不足，该项目将缩小。

代码：

代码语言：javascript复制
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，即项目的本来大小。

代码:

代码语言：javascript复制
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。后两个属性可选。

代码：

代码语言：javascript复制
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>
      );
  }

效果：

总结：

宽度 ＝ 弹性宽度 * ( flexGrow / sum( flexGorw ) )

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

参考博文：

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

http://www.jianshu.com/p/d1f62c2a8a4c

容器 css jqueryui

0 人点赞