react-native 样式百分比适配

Posted 2023-05-11

参考技术A react-native 样式适配, React Native中指定大小通常只能使用数字，不能使用百分比
所以考虑适配的问题, 做下笔记:

RN中适配, 由于基本样式都是flext弹性盒子布局, 所以大块还是比较好搞点, 但是有些细微处, 还是有些兼顾不到,可能这时候会想到百分比,

使用方法:

获取的值就是个准确的数值,此时可以改成你想要的百分比

关于移动端适配

通常移动端的布局方式

1、rem布局，通过动态设置根目录下的font-size达到元素大小“自适应”，通常和百分比布局一起使用

2、固定像素设固定视口宽度。

3、最费事的media query，根据设备视口宽度不同设置不同的样式，换句话说一个页面有多套样式。可以说是正宗的响应式布局。

常规的做法带来的苦恼

常规的这些做法总有一些缺陷是令人遗憾的：

1、rem和百分比布局，这种布局rem终归也是有极限的，当屏幕比较大时，页面元素就开始变得有那么一些不协调了。

2、设置固定的视口使用固定像素来做，那么问题又来了，假如你设置的是640px，那么就意味着最大在640的设备下能显示正常，一旦超出640的设备，就会出现一些地方布局出问题了，最关键还是存在一些兼容性的问题，安卓部分手机能够下滑，而实际下面根本没有任何东西，html的高度莫名其妙的多了很多。

3、media query，正常的来说这种做法是最好的，然而遗憾的是，它会大大增加UI的工作量，同时也大大增加你的工作量