React-Native跨平台多屏幕尺寸适配方案一览

2019-11-08 00:34:31

字体：大中小

来源：转载

供稿：网友

前言

对于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>

上一篇：自定义SeekBar（ProgressBar实现SeekBar效果）去除两边间距

下一篇：《天天魔塔》源码下载

学习交流

索泰发布一款GTX 1070 Mini迷你版本:小机

索泰发布一款GTX 1070 Mini迷你版本:小机箱大爱...

热门图片

猜你喜欢的新闻

猜你喜欢的关注