React Native Flexbox布局简单介绍

Flexbox

React Native中的Flexbox和CSS3中新加的Flexbox基本上是差不多的,CSS3 弹性盒子(Flexible BoxFlexbox),是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素拥有更恰当的排布行为。对很多应用程序来说,当不使用浮动,且弹性容器的外边距也不需要与其内容的外边距合并时,弹性盒子模型比起方框模型要好一些。
许多设计师会发现弹性盒子模型更易于使用。弹性盒子中的子元素可以在各个方向上进行布局,并且能以弹性尺寸来适应显示空间。由于元素的显示顺序可以与它们在源代码中的顺序无关,定位子元素将变得更容易,并且能够用更简单清晰的代码来完成复杂的布局。这种无关性是仅限制于视觉呈现上的,语音顺序以及基于源代码顺序的导航均不受影响。
但是呢,相对于CSS中的Flexbox它的属性名称不太一样,而且属性值也少,默认值也许也不一样。

样式属性

Flex Direction

在组件style中指定flexDirection可以决定布局的主轴。就是指子元素排列方向,水平方向(row)排列,竖直方向(column)排列。默认值:column
我们以初始化的模板为例,在View中再添加3个View,并设置flexDirection值为:row

export default class HHHHeats extends Component {
  render() {
    return (
      
      
      
      
      
      
      
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',//主轴排列方式
    alignItems: 'stretch',//次轴排列方式
    backgroundColor: '#F5FCFF',
    flexDirection: 'row',//主轴方向
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  views: {
    backgroundColor: 'green',
    width: 100,
    height: 100,
    marginLeft: 10,
    marginTop: 10,
  }
});

效果:


React Native Flexbox布局简单介绍_第1张图片
Paste_Image.png

Justify Content

上面的flexDirection决定了方向,这个justifyContent就是决定排列的方式。就是指子元素应该靠近主轴的起始端还是末尾段分布呢?亦或应该均匀分布?对应的这些可选项有:flex-start
centerflex-endspace-around以及space-between
将上面的justifyContent设置为:flex-start,效果如下图,可以看到子元素沿着主轴方向从起始位置开始排列(原为:center)。

container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    backgroundColor: '#F5FCFF',
    flexDirection: 'row',//主轴方向 
  }
React Native Flexbox布局简单介绍_第2张图片
Paste_Image.png

Align Items

flexDirection决定了主轴方向,justifyContent决定了子元素沿主轴方向的排列方式,而alignItems就是沿次轴方向(与主轴垂直的方向,它有4种可能的字符串值:flex-start、flex-end、center、stretch。比如主轴是row,那么次轴就是column)的排列方式。
比如将上方代码修改,alignItems属性值改为flex-end:

container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-end',
    backgroundColor: '#F5FCFF',
    flexDirection: 'row',//主轴方向
  }

React Native Flexbox布局简单介绍_第3张图片
Paste_Image.png

其中有个属性值 stretch表示拉长,或者拉宽。若要使其生效就不能给子元素设定高度或者宽度(取决于 flexDirection,因为 alignItems是次轴方向的排列方式),想想也是,若要有固定的宽度或者高度还怎么拉伸呢?
修改上方代码:

views: {
    backgroundColor: 'green',
    width: 100,
    //height: 100, 注释掉
    marginLeft: 10,
    marginTop: 10,
  }
container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'stretch',
    backgroundColor: '#F5FCFF',
    flexDirection: 'row',//主轴方向
  }

效果如下:


React Native Flexbox布局简单介绍_第4张图片
Paste_Image.png

alignSelf

alignSelf的属性值:autoflex-startflex-endcenterstretch。它的作用是用于忽略父视图中的alignItems设置的值。比如上方代码修改:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-start',
    backgroundColor: '#F5FCFF',
    flexDirection: 'row',//主轴方向
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  views: {
    backgroundColor: 'green',
    width: 100,
    height: 100,
    marginLeft: 10,
    marginTop: 10,
    alignSelf: 'flex-end'
  }
});

alignItems已经设置了flex-start,在子元素中alignSelf设置flex-end最终显示的为flex-end:

React Native Flexbox布局简单介绍_第5张图片
Paste_Image.png

当值为 auto则默认显示父视图中的 alignItems值。

你可能感兴趣的:(React Native Flexbox布局简单介绍)