当前位置:Gxlcms > html代码 > ReactNative之Flex布局总结_html/css_WEB-ITnose

ReactNative之Flex布局总结_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:17人阅读

从二月份开始学习ReactNative到现在已经有两个月了,零碎的记录了很多笔记,一直想写一些ReactNative相关的东西,奈何感觉自己学习的还比较浅陋,而且笔记比较杂乱,不知从何而起,所以迟迟没有动笔。清明三天假,决定无论如何都得整一篇出来。本来是想整一篇ReactNative布局篇的,但是看看那么多布局属性,自己对CSS又不是特别熟悉,布局篇从何谈起?所以,专门拿出ReactNative中布局比较重要的一个点Flex布局来做下总结,算是开启ReactNative篇章。

Flex是Flexible Box的缩写,意为“弹性布局”,2009年它由W3C提出了一种新的网页布局方案。而FaceBook将这个布局也应用到React和ReactNative两个项目当中。而在ReactNative当中,网页的有些属性和属性的值并不支持,下面来看看ReactNative当中支持的属性。(如果对于Flex布局不太了解的同学,可以看看 Flex 布局教程:语法篇)

一、容器属性:

ReactNative支持的容器属性有flexDirection、flexWrap、justifyContent和alignItems。

1、 flexDirection属性

flexDirection属性决定了主轴的方向,它有两个值:

  • row: 主轴为水平方向,起点在左端
  • column: 主轴为垂直方向,起点在顶部

2、flexWrap属性

flexWrap属性定义一条轴线排不下时是否折行。它有两个值,分别是'wrap'和'nowrap',分别代表支持换行和不支持换行,默认是'nowrap'。

3、justifyContent属性

主轴的对齐方式,默认为'flex-start',它的值有五个:

  • flex-start:主轴起点对齐
  • flex-end:主轴终点
  • center:居中
  • space-between:两端对齐,项目之间的间隔都相等
  • space-around: 每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍。

4、alignItems属性

交叉轴的对齐方式,默认为'stretch',它有四个值:

  • flex-start: 交叉轴的起点对齐
  • flex-end: 交叉轴的终点对齐
  • center: 交叉轴的中心对齐
  • stretch: 容器中的所有项目拉伸填满整个容器

二、项目属性

1、flex属性

是否让当前的视图尽量占用更大的空间,这个属性可能使项目属性justifyContent失效。有两个值0和1,0代表否,1代表是,默认为0。

2、alignSelf属性

允许单个项目在交叉轴方向上与其他项目不一样的对齐方式,可覆盖alignItems属性,它的值有五个,除了'auto',其他都与alignItem属性完全一致,默认为'auto'。

后话

在刚开始接触ReactNative的时候,对于我这么一个从未有过前端开发的iOS开发程序员,两个地方直接让我懵了,一是里面的语法,另外一个就是Flex布局。布局当中其它例如bottom、left、margin等等属性都能从字面意思理解,而Flex布局,确实是从没见过的东西,不理解里面的概念根本没法用。好在找到了阮一峰老师的 Flex 布局教程:语法篇的这篇文章,快速的掌握了Flex布局。 在这几天ReactNative的开发当中,越发觉得Flex布局的重要性,能将上面的属性全部理解清楚的话,并且灵活使用,必然会让ReactNative开发之旅更加得心应手。

参考:

Flex 布局教程:语法篇 弹性盒(Flexbox)

人气教程排行