[关闭]
@qidiandasheng 2020-10-10T06:39:47.000000Z 字数 1716 阅读 718

ReactNative之Flex布局(😄)

ReactNative


介绍

Flex布局是CSS的一种新的布局方式,由W3C在2009年提出。ReactNative中就使用了FlexBox作为布局方式。

其使用基本跟Web上的CSS FlexBox差不多。不同的是ReactNative中的FlexBox相当于一个阉割版,还有一些属性及值的写法上有些许不同。

标准的Web上面的FlexBox使用语法等可参考阮一峰的文章Flex 布局教程:语法篇

ReactNative里的FlexBox属性可以查看Layout with Flexbox。ReactNative的其他CSS属性参看Layout Props


FlexBox属性

ReactNative和Web上FlexBox对比

以下左边的就是ReactNative里的FlexBox属性,右边的就是标准的FlexBox的属性。这张表列出的就是ReactNative中用到的对应FlexBox,还有一些FlexBox的属性ReactNative是没用到的。但这几个基本能解决大部分的布局需求了。

上半部分为容器的属性,下半部分为容器里项目的属性。

属性名 属性名
flexDirection row , column flex-direction row , row-reverse , column , column-reverse
flexWrap wrap , nowrap flex-wrap nowrap , wrap , wrap-reverse
justifyContent flex-start , flex-end , center , space-between , space-around justify-content flex-start , flex-end , center , space-between , space-around
alignItems flex-start , flex-end , center , stretch , baseline align-items flex-start , flex-end , center , stretch , baseline
alignSelf auto, flex-start, flex-end, center, stretch, baseline align-self auto, flex-start, flex-end, center, stretch, baseline
flexGrow number 默认0 flex-grow number 默认0
flexShrink number 默认1 flex-shrink number 默认1
flexBasis length | auto 默认auto flex-basis length | auto 默认auto
flex -1, 0, 1, 2... flex flex-grow flex-shrink flex-basis三个属性的值的排列组合

flexDirection

flexDirection决定布局的主轴。row表示水平轴为主轴,则竖直轴为次轴。column表示竖直轴为主轴,水平轴为次轴。ReactNative中默认为column,而Web中默认为row

justifyContent和ailgnItmes

justifyContentailgnItmes都是表示对齐方式,justifyContent表示主轴上的对齐方式,即上面flexDirection确定的主轴。ailgnItmes表示次轴上的对齐方式。

以下为对应的排列效果图,其中alignItems需要配合justifyContent一起使用,即需要先确定主轴的对齐方式,否则无效。

  1. flexDirection: 'row',
  2. justifyContent: 'flex-start'

  1. flexDirection: 'column',
  2. justifyContent: 'flex-start'

  1. flexDirection: 'row',
  2. justifyContent: 'center',
  3. alignItems: 'flex-start',

  1. flexDirection: 'column',
  2. justifyContent: 'center',
  3. alignItems: 'flex-start',


参考

Flex 布局教程:语法篇

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注