React-Native基础（1）：布局

Flex布局

Flexbox布局旨在提供一个更佳有效的布局方式，更好的控制项目的对齐和自由分配容器空间，即使它们的大小是未知的或动态的。因此得其名"flex"。

父容器属性

• flexDirection?: enum('row', 'column','row-reverse','column-reverse')
• flexWrap?: enum('wrap', 'nowrap')
• justifyContent?: enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')
• alignItems?: enum('flex-start', 'flex-end', 'center', 'stretch')

主轴与侧轴

Flex模块方向分为主轴方向与侧轴方式，之所以不叫水平方向或垂直方向，是因为主轴和侧轴要依据flexDirection来决定。

1. 当为row或者row-reverse时，水平方向是主轴，垂直方向是侧轴；
2. 当为column或column-reverse时，水平方向是侧轴，垂直方向是主轴；

• flexDirection?: enum('row', 'column','row-reverse','column-reverse') 控制子元素水平和垂直方向。水平方向默认为row，垂直方向默认为column。flexDirection决定了当前容器的主轴和侧轴。

row-reverse	column-reverse

• flexWrap?: enum('wrap', 'nowrap') 控制子元素超过容器尺寸时的显示方式

wrap	nowrap

• justifyContent?: enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') 定义在主轴方向上排列子元素的方式。

flex-start	flex-end	center
space-between	space-around

• alignItems?: enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline') 定义子元素在容器中侧轴方向上的排列方式。与justifyContent相似，但是与justifyContent轴不相同。

flex-start	flex-end	center	base-line	stretch

• alignContent?: enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around') 定义每排在侧轴上的排列方式，当只有一排时属性无作用。

flext-start	flex-end	center
stretch	space-between	space-around

子元素属性

• alignSelf?: enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline') 定义Flex容器内子元素在侧轴上的排列方式，覆盖父容器的alignItems属性。

  • auto 表示继承了它的父容器的alignItems属性，无父容器默认为stretch拉伸。
  • 其他属性参照alignItems属性。

• flex?: number 定义组件伸缩能力大小，默认为0。在React-native中，flex与css中效果不同，值为数值。

  • 值为正数时，由值大小来定义尺寸的大小。如flex为2的元素要比felx为1的元素大两倍。
  • 值为0时，组件大小由width和height决定
  • 值为-1时，组件大小通常由width和height决定，然而在没有足够空间时，组件会缩小到minWidth和minHeight.
  • flexGrow, flexShrink和flexBasis效果与CSS中效果一致。

• flexBasis?: number, string

• flexGrow?: number 定义Flex容器Item的扩展因数，指定Item能够占据的空间值，默认auto

• flexShrink?: number 定义Flex容器Item的缩小因数，当Items的默认宽度超过容器宽度时，按照flexShrink值缩放items填充容器

• aspectRatio?: number 宽高比非CSS标准属性，只适应于react-native，用于控制未定义元素的尺寸大小。

尺寸

• height?: number, string
• width?: number, string
• maxHeight?: number, string
• maxWidth?: number, string
• minHeight?: number, string
• minWidth?: number, string

边框

• borderBottomWidth?: number
• borderLeftWidth?: number
• borderRightWidth?: number
• borderTopWidth?: number
• borderWidth?: number

边距

• top?: number, string
• bottom?: number, string
• left?: number, string
• right?: number, string

外边距

• margin?: number, string
• marginTop?: number, string
• marginBottom?: number, string
• marginVertical?: number, string 与同时设置marginBottom与marginTop一样
• marginLeft?: number, string
• marginRight?: number, string
• marginHorizontal?: number, string 与同时设置marginLeft与marginRight一样

内边距

• padding?: number, string
• paddingTop?: number, string
• paddingBottom?: number, string
• paddingVertical?: number, string 与同时设置paddingTop与paddingBottom一致
• paddingLeft?: number, string
• paddingRight?: number, string
• paddingHorizontal?: number, string 与同时设置paddingLeft与paddingRight一致

其他

• display?: string 设置组件的显示类型，效果类似CSS的display，但只支持flex和none。默认为flex
• overflow?: enum('visible', 'hidden', 'scroll') 定义超出容器时，子元素的绘制和显示方式。
  • visible 裁剪溢出内容
  • hidden 隐藏超过容器的部分
  • scroll 滚动显示溢出内容
• position?: enum('absolute', 'relative') 与CSS类似，但是默认值为relative，所以absolute只针对相对于父容器有效。
• zIndex?: number 指定显示在组件层级关系，通常情况来说无须使用zIndex。组件按照其在DOM树中的顺序决定层级关系。
• [ios]direction?: enum('inherit', 'ltr', 'rtl')

转载于:https://my.oschina.net/alexwan/blog/906784