ReactNative布局

FlexBox布局详解

什么是FlexBox

Flex container与Flex Item

FlexBox解决的问题

• 浮动布局
• 不同宽度屏幕的适配
• 宽度自动分配
• 水平垂直居中

FlexBox模型

图1 模型图

FlexBox属性详解

图2 容器属性与元素属性

图3 flexDirection

图4 flexWrap

图5 alignItems

图6 justifycontent

图7 flex

图8 alignSelf

FlexBox布局详解

声明和使用样式

通过style属性来使用样式：引用styles、数组形式引用、直接使用原生对象

布局单位

• 设置高度或者宽度时不用带单位，默认使用pt为单位
• 不能使用百分比来设置宽度或者高度
• 可通过Dimensions模块来获取窗口宽高
• 可通过PixelRatio模块来获取像素密度

盒子模型

图9 盒子模型

定位模式

• 支持absolute和relative定位
• 和css的标准不同的是，元素容器不用设置position: 'relative' | 'absolute'

css 属性

• transform
• border style
• font style
• shadow
• background
• overflow
• opacity

Image组件

• 从当前项目中加载图片
• 加载使用APP中的图片(图片放在)
• 加载来自网络的图片（一定需要指定图片的尺寸大小）