React Native之FlexBox布局

参考原文链接：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对象；

      <View style={{fontSize:40, 80,}}> </View>

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

      <View style={styles.container}></View>

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

      <View style={[styles.container, {fontSize:40, 80}]}>

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

      <View style={[styles.container, styles.color]}>