Skip to content

屏幕API

· 4 min

这一小节我们来看一下 RN 中和屏幕信息相关的 API，主要包括：

Dimensions#

Dimensions 这个 API 在前面学习组件相关知识的时候，我们已经好几次见到过它了。这里我们来正式介绍该 API。

该 API 主要用于获取设备屏幕的宽高，Dimensions 的使用比较简单，只需要使用 get 方法即可获取宽高信息，如下所示：

const windowWidth = Dimensions.get('window').width
const windowHeight = Dimensions.get('window').height
import React, { Component } from 'react'
import { View, StyleSheet, Text, Dimensions } from 'react-native'


const { width } = Dimensions.get('window')
const { height } = Dimensions.get('window')
const { scale } = Dimensions.get('window')


export default class NetInfoPage extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.textStyle}>屏幕宽：{width}</Text>
        <Text style={styles.textStyle}>屏幕高：{height}</Text>
        <Text style={styles.textStyle}>Scale：{scale}</Text>
      </View>
    )
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#F5FCFF',
  },
  btnContainer: {
    marginTop: 100,
    marginLeft: 10,
    marginRight: 10,
    backgroundColor: '#EE7942',
    height: 38,
    borderRadius: 5,
    justifyContent: 'center',
    alignItems: 'center',
  },
  textStyle: {
    fontSize: 28,
  },
})

尽管尺寸立即可用，但它们可能会发生变化（例如，由于设备旋转、可折叠设备等），因此任何依赖于这些常量的渲染逻辑或样式都应尝试在每次渲染时调用此函数，而不是缓存值（例如，使用内联样式而不是在样式表中设置值）。

PixelRatio#

PixelRatio 可以获取到设备的物理像素和 CSS 像素的比例，也就是 DPR。

如果 CSS 像素和设备像素 1:1 关系，那么 DPR 值就为 1。如果 1 个 CSS 像素对应 2 个设备像素，那么 DPR 值就为 2。

说简单点，就是一个 CSS 像素要用多少个设备像素来显示。如果 DPR 值为 1，表示用一个设备像素就够了，如果 DPR 值为 2，则表示一个 CSS 像素要用 2 个设备像素来表示。

以 iPhone4 为例，设备的物理像素为 640，为 CSS 像素为 320，因此 PixelRatio 值为 2。

在 RN 中，通过 PixelRatio.get( ) 方法即可获取 DPR 值。

import React, { Component } from 'react'
import { View, StyleSheet, Text, PixelRatio } from 'react-native'


const dpr = PixelRatio.get()


export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.textStyle}>DPR：{dpr}</Text>
      </View>
    )
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#F5FCFF',
  },
  textStyle: {
    fontSize: 28,
  },
})

常见的屏幕像素密度表如下：

设备像素密度设备
1iPhone2G/3G/3GS 以及 mdpi Android 设备
1.5hdpi Android 设备
2iPhone4/5s/5/5c/5s/6/7/8 以及 xhdpi Android 设备
3iPhone6Plus/6sPlus/7Plus/X/XS/Max 以及 xxhdpi Android 设备
3.5Nexus6/PixelXL/2XL Android 设备

我们通过前面的学习已经知道，在 RN 中所有尺寸都是没有单位的，例如：width: 100，这是因为 RN 中尺寸只有一个单位 dp，这是一种基于屏幕密度的抽象单位，默认省略。

在 RN 中，我们可以通过 PixelRatio 来将真实像素大小和 dp 单位进行一个转换

import { PixelRatio } from 'react-native'
const dp2px = (dp) => PixelRatio.getPixelSizeForLayoutSize(dp)
const px2dp = (px) => PixelRatio.roundToNearestPixel(px)


//按照下面的方式可实现px与dp之间的转换（比如100px*200px的View）
;<View
  style={{ width: px2dp(100), height: px2dp(200), backgroundColor: 'red' }}
/>