React Native布局详解
Flexbox 布局
Flex有两个属性:Container 和 Item
flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。采用flex布局的元素,称为flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为flex项目(flex item),简称"项目"。
容器属性
简述:
- flexDirection(决定容器内所有子元素item的排列方向(即主轴方向),如row子元素横排,column子元素竖排)
- justifyContent(定义了子元素Item在主轴方向上的排列方式,如center就居中,flex-start就是左端为开头)
- alignItems(子元素沿竖直轴的排列方式,flex-start就靠上,center就放中间线)
- flexWrap(定义是否换行,nowrap就不换行,wrap就换行)
常用:
1、flexDirection : 用来决定容器内所有子元素Item的排列方向,默认是竖直轴方向,即两个View竖直排列
(想让子元素横向并列就用flexDirection:'row')
.box {
flex-direction: row | row-reverse | column | column-reverse;
}

2、justifyContent:定义了子元素Item在主轴方向上的排列方式
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}

3、alignItems子元素沿竖直轴的排列方式
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}

不常用:
1、flexWrap默认容器中的子元素Item都排列在一条轴线上,flexWrap属性定义了如果在一条轴线上排列不下所有的Item元素,可以进行换行排列
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap(默认值):不换行

wrap:换行,且第一行在上方

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

元素属性:
1、flex 布局权重
1:0:flex=0的项目占用空间仅为内容所需空间,flex=1的项目会占据其余所有空间
在部分组件指定了height的情况下,flex是“除了height以外剩余空间”的分布比例。例如:
<View style={{height:100}}>
<View style={{flex: 3}} />
<View style={{flex: 2}} />
</View>
两个子View的高度分别是 60和40。宽度同理
Flex计算规则详见:https://blog.csdn.net/u010377383/article/details/79661859
2、alignSelf
项目交叉轴方向自身对齐方式
从项目经验总结的常用方法:
1、设置border边线的方法
borderRightWidth: 0,
borderLeftWidth: 0,
borderTopWidth: 0,
borderBottomWidth: 1,
borderBottomColor:'#f5f5f5',
2、通过flex布局将一个图标移到最右端的常用方法
图标外层嵌套一个View,View的style如下:
imgRightStyle:{
flex:1,
flexDirection:'row',
justifyContent: 'flex-end',
alignItems: 'center',
},
解释下:flex将剩余空间占满,flexDirection使得View主轴为横向轴,justifyContent使得row的起始端为右端,alignItem将图标上下居中。
参考:
https://www.jianshu.com/p/4a61a517c792
https://blog.csdn.net/codetomylaw/article/details/52190636
React Native布局详解的更多相关文章
- Android开发重点难点1:RelativeLayout(相对布局)详解
前言 啦啦啦~博主又推出了一个新的系列啦~ 之前的Android开发系列主要以完成实验的过程为主,经常会综合许多知识来写,所以难免会有知识点的交杂,给人一种混乱的感觉. 所以博主推出“重点难点”系列, ...
- 【翻译】Anatomy of a Program in Memory—剖析内存中的一个程序(进程的虚拟存储器映像布局详解)
[翻译]Anatomy of a Program in Memory—剖析内存中的一个程序(进程的虚拟存储器映像布局详解) . . .
- Android布局详解之一:FrameLayout
原创文章,如有转载,请注明出处:http://blog.csdn.net/yihui823/article/details/6702273 FrameLayout是最简单的布局了.所有放在布局里的 ...
- Android 布局详解
Android 布局详解 1.重用布局 当一个布局文件被多处使用时,最好<include>标签来重用布局. 例如:workspace_screen.xml的布局文件,在另一个布局文件中被重 ...
- DevExpress控件GridControl中的布局详解 【转】
DevExpress控件GridControl中的布局详解 [转] 2012-10-24 13:27:28| 分类: devexpress | 标签:devexpress |举报|字号 订阅 ...
- Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)
[Android布局学习系列] 1.Android 布局学习之——Layout(布局)详解一 2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数) 3.And ...
- 【转载】图说C++对象模型:对象内存布局详解
原文: 图说C++对象模型:对象内存布局详解 正文 回到顶部 0.前言 文章较长,而且内容相对来说比较枯燥,希望对C++对象的内存布局.虚表指针.虚基类指针等有深入了解的朋友可以慢慢看.本文的结论都在 ...
- 弹性盒布局详解(display: flex;)
弹性盒布局详解 弹性盒介绍 弹性盒的CSS属性 开启弹性盒 弹性容器的CSS属性 flex-direction设置弹性元素在弹性容器中的排列方向 主轴与侧轴(副轴) flex-wrap设置弹性容器空间 ...
- Grid 网格布局详解
Grid网格布局详解: Grid布局与Flex布局有着一定的相似性,Grid布局是将容器划分成行和列,产生单元格,可以看做是二维布局. 基本概念: 采用网格布局的区域,称为"容器" ...
随机推荐
- asp.net 身份验证(Update)
ASP.NET 有四种 身份验证, 用的最广的就是 Froms 这几天 做项目 想用到 配置文件, 比较了 MVC 和ASP.NET 发现 还是 MVC 给力(MVC 叫做 过滤器 ...
- php连接oracle oracle开启扩展
<?php /** * 由于公司的需要,使用php+oracle开发项目,oracle因为有专门人员开发设计,我们只需远程调用 *于是乎遇到了蛋疼的问题就是开启oracle扩展的问题,虽然你在p ...
- __builtin_ _Find_first()
•int __builtin_ffs (unsigned int x) 返回x的最后一位1的是从后向前第几位,比如7368(1110011001000)返回4. •int __builtin_clz ...
- Google 的Web开发相关工具
一.PageSpeed Insights PageSpeed Insights 能够针对移动设备和桌面设备生成网页的实际性能报告,并能够提供关于如何改进相应网页的建议. 在线工具:https://de ...
- Oracle 开窗函数--转
oracle的分析函数over 及开窗函数 转自:http://zonghl8006.blog.163.com/blog/static/4528311520083995931317/一:分析函数ove ...
- springboot2.0入门(五)--swagger2接口API构建
一.特点 代码变,文档变.只需要少量的注解,Swagger 就可以根据代码自动生成 API 文档,很好的保证了文档的时效性. 跨语言性,支持 40 多种语言. Swagger UI 呈现出来的是一份可 ...
- 题解 [CF916E] Jamie and Tree
题面 解析 这题考试时刚了四个小时. 结果还是爆零了 主要就是因为\(lca\)找伪了. 我们先考虑没有操作1,那就是裸的线段树. 在换了根以后,主要就是\(lca\)不好找(分类讨论伪了). 我们将 ...
- JS 中获取服务器时间的注意点
在通过js获取服务器时间时,遇到了小小的问题,但造成的影响挺大的,所以写出来提醒大家,在获取服务器时间时一定要细心要多测试多验证. js 中使用以下方法获取服务器时间时要注意两点: 1.xhr.ope ...
- POJ2182 Lost Cows 树状数组
题意:有编号1~n乱序排列的奶牛,给出了每一个奶牛前小于自己编号的奶牛数目 维护一个树状数组,下标是编号,值为$0/1$标识是否存在,很显然最后一个牛的编号是知道的,我们在树状数组上二分出前缀和为小于 ...
- JetBrains IDE 基本快捷键
转载自:https://nextfe.com/jetbrains-ide-shortcuts/ 一个好的手艺人很熟悉他的工具.软件开发者也不例外.所以,在编程的过程中,值得了解一些键盘快捷键,以免因为 ...