ReactNative重构之前的android项目

这篇梳理一下这么用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，安卓开发用的字体大小单位。

在xhdpi的密度下，1dp=2px；在hdpi情况下，1dp=1.5px

为什么要把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属性定义了项目在主轴上的对齐方式。

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

（5）align-items

align-items属性定义项目在交叉轴上如何对齐。

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。