初学者在一开始接触到RN的时候，可能在写样式的时候，会直接写成
test: {
height: 64,
width: 64,
}
这样写有什么不好呢？我们看处理前和处理后的对比，以及大手机和小手机的对比
处理前大小手机之间对比.jpg
处理后带下手机之间对比.jpg
对于适配来说，在大手机上显示的就是相对大一点，在小手机上就会相对小一点，而看上面两幅图对比一下，处理前在大手机上反而高度要小，但是我们做了一番处理之后，在iPhone8 Plus上就能够做到适应了，下面是我封装的RN里面可以做到自适应各种手机大小的长度单位
import {
Dimensions,
Platform
} from 'react-native';
//获取屏幕大小
const { width, height } = Dimensions.get("window");
const ScreenWidth = Math.min( width, 540); //判断是否是 iphone Plus
//db数值转化
export function getPixel(num, designWidth = 375) {
return num * ScreenWidth / designWidth ;
}
就这样，我们在需要调用这个函数的文件里面引入该文件，就能使用了
例如我的这个是存放在common文件夹里的common.js
import { getPixel } from './common/common'
//下面样式中便可以这样用：
test: {
height: getPixel(64),
width: getPixel(64),
}
其实写这个函数的原理就类似于我们写h5页面时使用rem做适配一样。
今天分享到此哦～～ 有问题可以留言～～
