React Native之FlexBox布局

react

参考原文链接：https://www.cnblogs.com/wujy/p/5841685.html

弹性盒模型（The Flexible Box Module）,又叫Flexbox，意为“弹性布局”，旨在通过弹性的方式来对齐和分布容器中内容的空间，使其能适应不同屏幕，为盒装模型提供最大的灵活性。

Flex布局主要思想是：让容器有能力让其子项目能够改变其宽度、高度（甚至是顺序），以最佳方式填充可用空间。

=====================================

再来说说justifyContent和alignItems：

justifyContent是相对于主轴的对齐方式，而alignItems是相对于交叉轴的对齐方式。

那么，这个主轴和交叉轴如何确定呢？

初学者会认为水平方向就是主轴，垂直方向就是交叉轴；错！

主轴和交叉轴是相对于flexDireaction的值而言的！

flexDireaction 主轴交叉轴

row 水平方向垂直方向

column 垂直方向水平方向

那么你明白了吗？

=====================================

然后是默认宽度问题

我们都知道块级标签如果不设置宽度，通常都是独占一行的，在React Native中的组件中需要设置flexDirection：'row'，才能在同一行显示，flex的元素如果不设置宽度，都会百分之百的占满父容器。

=====================================

然后是关于样式

1）普通内联样式:{{}},第一层｛｝是表达式，第二层｛｝是js对象；

2）调用样式表:{样式类.属性}

3）样式表和内联样式共存:{[]}

4）多个样式表:{[样式类1，样式类2]}