react-native 布局篇之flexbox

Near_Li 发布于2019-08-20 18:11 / 1105人阅读

摘要：布局直接阅读大神文章阮一峰写的布局。有几个注意的点，我在刚刚开始中总结的容器属性，，布局方式主轴对齐方式交叉轴对齐方式这里需要特别注意的就是主轴和交叉轴。特别注意的作用对象是主轴在中设置是水平方向上占满整个容器。

FlexBox布局

直接阅读大神文章：阮一峰写的FlexBox布局。在react-native中原理是一样的，只不过可能有写属性在react-native中简化了。
有几个注意的点，我在刚刚开始flexbox中总结的：

容器(container)属性

flexDirection ，justifyContent，alignItems

flexDirection flex布局方式

justifyContent 主轴对齐方式

alignItems 交叉轴对齐方式
这里需要特别注意的就是主轴和交叉轴。以下举具体示例说明：

flexDirection:"column"（默认值），垂直居中对齐：justifyContent:"center",水平居中对齐：alignItems:"center"
flexDirection:"row"，垂直居中对齐：alignItems:"center"，水平居中对齐：justifyContent:"center"

项目(item)属性

flex

为什么设置flex:1占满整个容器
很多时候我们经常直接写flex:1占满整个容器，那为什么写flex:1,不写flex:2或者flex:3呢？首先我们要了解flex属性是比例值，假设现在有两个项目，分别设置属性flex:1,flex:2,那么第一项就占据整个容器的1/3,第二项占据整个容器2/3。这下知道为什么flex:1占满整个容器了吧，因为是1/1。所以如果容器只有一个项目那么flex:1,flex:2,flex:3都是占满整个容器，因为分别的意思是：1/1,2/2,3/3。

特别注意flex:1的作用对象是主轴
在flexDirection:"row"中设置flex:1,是水平方向上占满整个容器。在flexDirection:"column"中设置flex:1,是垂直方向上占满整个容器。

云服务器 GPU云服务器 flexbox react-native FlexBox详解 flexbox容器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84166.html

react-native 布局篇之position

摘要：先简单的看一下示例图相对布局。这个是相对于父容器进行据对布局。绝对布局是脱离文档流的，不过奇怪的是依旧在文档层次结构里面，这个和的也很大不一样。 position布局 position:enum(absolute,relative)。先简单的看一下示例图 showImg(https://segmentfault.com/img/remote/1460000010270428); po...

Lemon_95 2019-08-20 18:11 评论0 收藏0
[RN] React Native style -- 样式的使用

摘要：表示在上的对齐方式，基于的顶部基于的底部基于的中部布满整个。的属性所占的比例大小。它允许项目中当个和其他不一样的对齐方式，会覆盖的属性。 React-Native 样式的使用。 React-Native 编写的应用的样式不是靠css来实现的，而是依赖javascript来为你的应用来添加样式，先不讨论这样做的好处与坏处，因为这个实现方法本身就存在着很多争议，我们主要关注他的样式的语法和...

FrozenMap 2019-08-21 10:49 评论0 收藏0
react-native电影简介app，了解一下？（android端）

摘要：寒假结束了，在寒假期间玩了一下，模仿豆瓣实现了一个查看当前热门电影和即将上映电影的简单，项目比较简单，十分适合刚刚入门的同学查看。寒假结束了，在寒假期间玩了一下react-native，模仿豆瓣实现了一个查看当前热门电影和即将上映电影的简单app，项目比较简单，十分适合刚刚入门的同学查看。首先我们要了解react-native： react-native中文网、react-nativ...

RayKr 2019-08-26 11:48 评论0 收藏0
react-native 开发笔记（一）

摘要：颜色问题这个不算问题了，算是优势。一般做开发，如果不是图标字体的话，我们会为图片的选中和不选中准备两张图片做切换。这可能会导致开发者很困惑，怎么高度和我想的不一致呢那只要把剩余的高度都设置准确，这些都会迎刃而解。 react-native 开发笔记开始使用react-native开发产品，讲讲今天遇到的坑 TabBarIos的使用一般app的设计都是主页是一个tab页面，我们的ap...

waltr 2019-08-20 16:23 评论0 收藏0