react-native中长度单位换算

初学者在一开始接触到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做适配一样。

今天分享到此哦～～ 有问题可以留言～～