RN布局
时间:2022-07-25
本文章向大家介绍RN布局,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
RN布局
背景
今年以来,公司新来的总监力推ReactNative,目标是做大前端,H5选用React,客户端用ReactNative,所以我要再“复习”一下网页布局。顺便把内容记录到自己的博客中,用宝儿姐的话来说:“机智的一bi”。
<!--more-->
内容
Flex布局:Flex是Flexible Box的缩写。设为Flex布局之后,子元素的float、clear、和verti-align属性将失效。
容器属性:
经常设置在容器上的属性有:
flexDirection // 主轴的排列方向
flexWrap // 沿主轴排不下的时候,如何换行
justifyContent // 项目在主轴上的排列方式
alignItems // 项目在交叉轴上的排列方式
alignContent // 多根轴线的对齐方式。如果只有一根轴线,该属性不起作用
alignSelf // 允许单个项目有与其他项目不一样的对齐方式,可覆盖alignItems属性
每个属性的可设置的值如下:
flexDirection: 'column' | 'column-reverse' | 'row' | 'row-reverse'
flexWrap: 'nowrap' | 'wrap' | 'wrap-reverse'
justifyContent: 'center' | 'flex-start' | 'flex-end' | 'space-around' | 'space-between' | 'space-evenly'
alignItems: 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'
alignContent: 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'stretch'
alignSelf: 'auto' | 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'
每个属性的值的意义如下:
- flexDirection: 主轴的排列方向
column // 默认的排列方式,从上往下排列
column-reverse // 从下往上排列
row // 从左到右排列
row-reverse // 从右到左排列
- flexWrap: 沿主轴排不下的时候,如何换行
nowrap // 默认,不换行,可能导致溢出
wrap // 换行,第一行在上方
wrap-reverse // 换行,第一行在下方
- justifyContent: 项目在主轴上的排列方式
center // 居中
flex-start // 默认,左对齐
flex-end // 右对齐
space-around // 每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍
space-between // 两端对齐,项目之间的间隔都相等,n-1个间隙
space-evenly // 两端和项目之间的间隔都相等,n+1个间隙
- alignItems: 项目在与主轴垂直的交叉轴上的排列方式
baseline // 项目的第一行文字的基线对齐
center // 交叉轴中点对齐
flex-end // 交叉轴终点对齐
flex-start // 交叉轴起点对齐
stretch // 默认,项目未设置高度或者设置未auto,将占满整个容器的高度
- alignContent: 定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
center // 与交叉轴中点对齐
flex-end // 与交叉轴的终点对齐
flex-start // 与交叉轴起点对齐
space-around // 每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍
space-between // 与交叉轴两端对齐,轴线之间的间隔平均分布
stretch // 默认,轴线占满整个交叉轴
- alignSelf: 允许单个项目有与其他项目不一样的对齐方式,可覆盖alignItems属性。
auto // 按照自身设置的宽高来显示,如果没设置,效果跟stretch一样
baseline // 项目第一行文字的基线对齐
center // 位于中间位置
flex-end // 与父容器底部对齐
flex-start // 与父容器顶部对齐
stretch // 交叉轴拉伸,不设置具体的width/height的时候stretch才有效果
flexDirection: 'column' |
flexDirection: 'column-reverse' |
flexDirection: 'row' |
flexDirection: 'row' |
---|
来源
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法