React Native flexBox布局(一)

序:

    布局想必大家都知道,在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-growflex-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>
      );
  }

效果:

总结:

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

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

参考博文:

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励