React Native布局方式学习

最近学习React Native,，会有一些学习笔记，今天学习React Native布局。

---

1. 组件宽度和高度

React Native中控件的宽度和高度可以由width和Height属性来控件。尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。如Android中的dp一样经测试:当组件没有设置宽度时，组件默认占满父组件宽度（相当于android的march_parent）。当组件没有设置高度时，组件默认包含子组件高度(相当于android的wrap_content).

2. 弹性（Flex）宽高

在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比。)当同时设置flex和width和height时，width生效，height不生效

3. flexDirection

注：在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向

flexDirection属性用于控制子组件的排列方式：当值为row时，子组件已从左到右横向方式排列。当值为column时，子组件以从上到下纵向方式排列。当值为row-reverse时，子组件以从右到左横向方式排列。当值为column-reverse时，子组件以从下向上纵向方式排列。

4. justifyContent

在组件的style中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end、space-around以及space-between。

5.alignItems

在组件的style中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。
注意：要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸。以下面的代码为例：只有将子元素样式中的width: 50去掉之后，alignItems: ‘stretch’才能生效。

具体的样式表现方式可以看这位灵魂画师的图

通过以上几种属性基本可以满足我们开发的布局要求。