ReactNative学习分享（2）页面布局与适配

对前端一窍不通，还望各位神指点一二

首先声明，部分资料与图片来自小码哥，需要学习的朋友，文章最下面有链接，还望下载资料。

FlexBox布局，就是决定父盒子和子盒子的关系的

FlexBox核心思想，在CSS是块，内联流的方向，Flex布局是基于flex-flow流（主轴是竖直方向，辅轴就是平直方向，当主轴是平直方向，那么辅轴就是竖直方向）

FlexBox

FlexBox

一、FlexBox布局

1.1 FlexBox是什么意思呢？

flexible（形容词）：能够伸缩或者很容易变化，以适应外界条件的变化

box（名词）：通用的矩形容器

1.2什么是FlexBox布局?

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

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

React native中的FlexBox是这个规范的一个子集。

1.3大部分情况下是处理图中FlexItem在FlexContainer中的位置和尺寸关系

FlexContainer

二、属性定义

a）

flexDirection：该属性决定主轴的方向

row: 主轴为水平方向，起点为左端。

row-reverse: 主轴为水平方向，起点在右端

column：主轴为竖直方向，起点在上沿。（默认）

column-reverse：主轴为竖直方向，起点在下沿。

flexDirection:’row’ (主轴方向为水平方向，起点为左端 )

当View包含View1，和View2的时候，

1，若子控件并未设备高度，则会与父控件的高度相同

2，若子控件并未设备宽度，则会按照控件中的内容进行宽度设置（例如按照文字的总高度）

flexDirection

b)

marginTop: 上间距，

c)

justifyContent：定义伸缩项目在主轴上的对齐方式

flex-start: 伸缩项目向一行的起始位置靠齐

flex-end: 伸缩项目向一行的结束位置靠齐

center: 伸缩项目向一行的中间位置靠齐

space-between: 两端对齐，项目之间的间隔都相等

space-around: 伸缩项目会平均的分布在行里，两端保留一半的空间

justifyContent

d)

alignItems:定义伸缩项目在交叉轴（侧轴，垂直于主轴的轴）上的对其方式

flex-start: 交叉轴的起点对齐

flex-end: 交叉轴的终点对齐

center: 交叉轴的中点对其

baseline: 项目中第一文字的基线对其

stretch: 如果项目中未设置高度或者设置为auto，将占满整个容器的高度（默认）

alignItems

e)

flex-wrap:默认情况下，项目都排在一条线上。flex-wrap属性定义，如果一条轴线排不下该如何换行

nowrap: 不换行

wrap: 换行

wrap-reverse:换行，第一行在下方

flex-wrap

nowrap(默认值)：不换行。

nowrap

wrap：换行，第一行在上方。

wrap

wrap-reverse：换行，第一行在下方。（和wrap相反）

wrap-reverse

子控件相关属性

元素属性：

a)

flex: 用来决定盒子宽度（宽度= 弹性宽度=flexGrow/sum(flexGrow)））默认值（0，“flex-grow”、“flex-shrink”和“flex-basis”三个属性的缩写，其中第二个和第三个参数（flex-    shrink、flex-basis）是可选参数。

默认值为“0 1 auto”。

宽度＝弹性宽度* ( flexGrow / sum(flexGorw) )

flex:

b)

alignSelf: 单个项目在垂直于主轴的的轴上的对其方式

flex-start:父控件顶部

flex-end:父控件底部

center:父控件中间

auto:继承父元素的alignItems属性

baseline:第一行文字的基线

stretch:按照父控件的相关尺寸

alignSelf

Text相关属性

Text相关属性

三，开发中如何获取屏幕的宽，高，分辨率

开发中如何获取屏幕的宽，高，分辨率

感谢各位的阅读，如有不当之处还望各位多多指教

相关百度云资料：链接: https://pan.baidu.com/s/1o8EWYCi 密码: u38t