前言
对于RN而言,跨平台已经是不二之选,那么对于不同平台的尺寸的适配又是一个亘古的难题,下面说一下我再项目中的一点实践心得,大神勿喷。
方法
PixelRatio get
static静态方法,进行返回屏幕的像素密度。一些例子如下:
PixelRatio.get()==1 mdpi Android设备(160 dpi)
PixelRatio.get()==1.5 hdpi Android设备(240 dpi)
PixelRatio.get()==2 iPhone4,4S,iPhone 5,5C,5S,iPhone 6,xhdpi Android设备(320 dpi)
PixelRatio.get()==3 iPhone6 Plus,xxhdpi Android设备(480 dpi)
PixelRatio.get()==3.5 Nexus 6
Dimensions.get(‘window’).width;
同样也可以借助于Dimensions 的宽度进行适配。
import { StyleSheet,Dimensions,PixelRatio } from 'react-native';
const deviceWidth = Dimensions.get('window').width;
Iphone尺寸
getFontScale()
static 静态方法 进行获取文字大小的缩放比例,这个比例可以用来计算字体的绝对大小。所有很多元素可以用这个结果进行计算大小。如果没有设置字体缩放大小,那么该直接回返回设备像素密度。
目前:该方法现在只是在Android平台实现了,在Android平台上面我们可以去设备Settings->Display->Font Size(查询字体大小)。在iOS平台上面总会返回默认的像素密度。
3.getPixelSizeForLayoutSize(layoutSize:number) static 静态方法, 进行把dp转换成像素px,该会返回一个整形的数值
4.roundToNearestPixel(layoutSize:number) static 静态方法,
5.startDetecting() 静态方法,该方法现在在移动设备上面暂时不支持
代码示例
'use strict';
import React,{
PixelRatio,Text
} from 'react-native';
<Text style={styles.instructions}> 当前的屏幕像素密度比例为:{PixelRatio.get()}; </Text>
原文链接:https://www.f2er.com/react/304773.html