这篇梳理一下这么用rn 写布局,之前习惯了用xml;
1.rn长度默认对应dp:
来谈谈:px,pt,ppi,dpi,dp,sp;
- px:pixel,像素,电子屏幕上组成一幅图画或照片的最基本单元
- pt: point,点,印刷行业常用单位,等于1/72英寸
- ppi: pixel per inch,图像分辨率,每英寸像素数,该值越高,则屏幕越细腻
- dpi: dot per inch:打印分辨率,每英寸多少点,该值越高,则图片越细腻,每英寸点数,即每英寸包含像素个数。
- dp: dip,Density-independent pixel, 是安卓开发用的长度单位,1dp表示在屏幕像素点密度为160ppi时1px长度
- sp: scale-independent pixel,安卓开发用的字体大小单位。
为什么要把sp和dp代替px?最简单的原因是他们不会因为ppi的变化而变化,在相同物理尺寸和不同ppi/dpi下,他们呈现的高度大小是相同。也就是说更接近物理呈现,而px则不行。
2.flex的使用:(阮一峰的讲解)
我们会使用
flex:1
来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1
,则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex
值不一样,则谁的值更大,谁占据剩余空间的比例就更大。(1)flex-direction
属性决定主轴的方向(主轴水平,交叉轴垂直)-
row
(默认值):主轴为水平方向,起点在左端。 -
row-reverse
:主轴为水平方向,起点在右端。 -
column
:主轴为垂直方向,起点在上沿。 -
column-reverse
:主轴为垂直方向,起点在下沿。
(2)felx-wrap属性
(1)
nowrap
(默认):不换行。
(2)wrap
:换行,第一行在上方。
(3)
wrap-reverse
:换行,第一行在下方。
(3)flex-flow(以上两者简写)
(4)justify-content属性
justify-content
属性定义了项目在主轴上的对齐方式。![](https://i-blog.csdnimg.cn/blog_migrate/067b28f4472a7f9c42d3c9fadc9f8448.png)
-
flex-start
(默认值):左对齐 -
flex-end
:右对齐 -
center
: 居中 -
space-between
:两端对齐,项目之间的间隔都相等。 -
space-around
:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
(5)
align-items
align-items属性定义项目在交叉轴上如何对齐。
![](https://i-blog.csdnimg.cn/blog_migrate/d82b90801505006795ef3eb991876e39.png)
-
flex-start
:交叉轴的起点对齐。 -
flex-end
:交叉轴的终点对齐。 -
center
:交叉轴的中点对齐。 -
baseline
: 项目的第一行文字的基线对齐。 -
stretch
(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。