初學(xué)者在一開始接觸到RN的時(shí)候，可能在寫樣式的時(shí)候，會(huì)直接寫成

test: {
   height: 64,
   width: 64,
}

這樣寫有什么不好呢？我們看處理前和處理后的對(duì)比，以及大手機(jī)和小手機(jī)的對(duì)比

處理前大小手機(jī)之間對(duì)比.jpg

處理后帶下手機(jī)之間對(duì)比.jpg

對(duì)于適配來說，在大手機(jī)上顯示的就是相對(duì)大一點(diǎn)，在小手機(jī)上就會(huì)相對(duì)小一點(diǎn)，而看上面兩幅圖對(duì)比一下，處理前在大手機(jī)上反而高度要小，但是我們做了一番處理之后，在iPhone8 Plus上就能夠做到適應(yīng)了，下面是我封裝的RN里面可以做到自適應(yīng)各種手機(jī)大小的長(zhǎng)度單位

import {
   Dimensions,
   Platform
} from 'react-native';


//獲取屏幕大小
const { width, height } = Dimensions.get("window");
const ScreenWidth = Math.min( width, 540); //判斷是否是 iphone Plus


//db數(shù)值轉(zhuǎn)化
export function getPixel(num, designWidth = 375) {
   return num * ScreenWidth / designWidth ;
}

就這樣，我們?cè)谛枰{(diào)用這個(gè)函數(shù)的文件里面引入該文件，就能使用了

例如我的這個(gè)是存放在common文件夾里的common.js

import { getPixel } from './common/common'
//下面樣式中便可以這樣用：
test: {
    height: getPixel(64),
    width: getPixel(64),
}

其實(shí)寫這個(gè)函數(shù)的原理就類似于我們寫h5頁(yè)面時(shí)使用rem做適配一樣。

今天分享到此哦～～ 有問題可以留言～～