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]}>

 

原文地址:https://www.cnblogs.com/zyl-Tara/p/9492979.html