React Native 鸿蒙跨平台开发：Dimensions 屏幕尺寸获取

基于 RN 内置的 Dimensions API，无需引入任何第三方库，即可实现一些实用的进阶功能，贴合真实开发需求，所有技巧均在 OpenHarmony6.0 真机实测通过，帮助你吃透 Dimensions 的全部用法，举一反三，应对所有复杂的尺寸适配场景！本示例是 Dimensions API 的最核心用法，代码最简、逻辑最清晰，无任何冗余代码，包含「尺寸获取、数据解构、页面展示、基础计算」所

哈__

416人浏览 · 2026-01-12 15:54:02

哈__ · 2026-01-12 15:54:02 发布

一、核心知识点：Dimensions 工具 API 完整核心用法

1、核心 API 导入

2、Dimensions 核心常量 & 核心方法

3、核心知识点：尺寸单位规范

二、实战一：基础极简版 - 屏幕尺寸获取核心实现

三、实战二：业务完整版 - 尺寸适配 + 横竖屏监听

四、扩展用法：Dimensions 实用进阶技巧

扩展 1：封装全局尺寸工具类

扩展 2：结合 PixelRatio 实现高清图片适配

一、核心知识点：Dimensions 工具 API 完整核心用法

Dimensions 是 React Native 内置的全局静态工具 API，无组件化嵌套、无生命周期依赖，属于直接调用的工具类，所有开发场景、所有适配需求，均基于以下核心知识点实现，语法简洁固定、逻辑清晰易懂。零基础开发者只需吃透这部分内容，即可应对鸿蒙项目中所有屏幕尺寸相关的开发需求，文末附带完整核心对照表，所有知识点一目了然，可直接对照开发！

1、核心 API 导入

import { Dimensions } from 'react-native';

无需额外路径配置、无需别名，直接从 react-native 核心库导入即可，这是鸿蒙端唯一有效的导入方式，导入后即可全局调用所有方法与属性。

2、Dimensions 核心常量 & 核心方法

▍核心静态常量Dimensions 提供 2 个核心全局常量，直接调用即可获取尺寸数据，无需传参、无需异步请求，同步获取、数据实时生效，是开发中的首选方案：

// 获取【设备完整屏幕】的尺寸对象 (宽、高)
const screen = Dimensions.get('screen');
// 获取【应用可用窗口】的尺寸对象 (宽、高)
const window = Dimensions.get('window');

▍核心数据解构（固定写法开发必备）获取的尺寸对象为 Object 类型，包含 width（宽度）、height（高度）两个核心属性，开发中通过解构赋值快速获取，极简高效：

// 方式1：解构获取 屏幕宽高
const { width: screenWidth, height: screenHeight } = Dimensions.get('screen');
// 方式2：解构获取 窗口宽高
const { width: windowWidth, height: windowHeight } = Dimensions.get('window');

▍核心监听方法 鸿蒙设备支持横竖屏切换，切换后屏幕宽高会互换，Dimensions 提供专属的监听方法，实时监听尺寸变化并更新页面，完美适配横竖屏场景，无

// 监听屏幕尺寸变化 (横竖屏切换/窗口大小变化)
const sizeChangeListener = Dimensions.addEventListener('change', ({ screen, window }) => {
  // screen = 最新屏幕尺寸对象
  // window = 最新窗口尺寸对象
  console.log('屏幕尺寸变化：', screen.width, screen.height);
});

// 移除监听 (组件卸载时必做，防止内存泄漏)
sizeChangeListener.remove();

3、核心知识点：尺寸单位规范

单位类型	含义说明	RN 鸿蒙端表现	是否需要转换	开发使用建议
dp (RN 默认)	设备独立像素，适配所有分辨率	Dimensions 获取的所有数据均为 dp 单位	无需任何转换，直接使用	开发首选，所有布局、样式均用该单位
px (物理像素)	设备真实物理像素，与分辨率绑定	鸿蒙端可通过 PixelRatio 转换获取	需要手动计算：px = dp * PixelRatio.get ()	仅做高清图片适配时使用，布局禁止使用
% (百分比)	基于父容器的相对单位	鸿蒙端完美支持，与 dp 单位共存	无需转换，直接在 StyleSheet 中使用	辅助布局，适合宽度自适应场景

二、实战一：基础极简版 - 屏幕尺寸获取核心实现

开发中使用率最高的基础场景：实现「屏幕尺寸 + 窗口尺寸」的精准获取、页面实时展示、基础尺寸计算，适合所有页面的基础自适应布局、组件尺寸动态计算、多机型适配等极简业务需求。本示例是 Dimensions API 的最核心用法，代码最简、逻辑最清晰，无任何冗余代码，包含「尺寸获取、数据解构、页面展示、基础计算」所有核心功能，OpenHarmony6.0 真机实测 100% 可用，是零基础入门的最佳版本。

import React from 'react';
import { View, Text, Dimensions, StyleSheet } from 'react-native';

const RNDimensionsBasic = () => {
  const { width: screenWidth, height: screenHeight } = Dimensions.get('screen');
  const { width: windowWidth, height: windowHeight } = Dimensions.get('window');

  return (
    <View style={styles.container}>
      <Text style={styles.title}>RN鸿蒙 · 屏幕尺寸获取【基础版】</Text>
      <View style={styles.card}>
        <Text style={styles.cardTitle}>设备屏幕尺寸 (完整物理屏)</Text>
        <Text style={styles.sizeText}>屏幕宽度 ：{screenWidth} dp</Text>
        <Text style={styles.sizeText}>屏幕高度 ：{screenHeight} dp</Text>
      </View>

      <View style={styles.card}>
        <Text style={styles.cardTitle}>应用窗口尺寸 (实际可用区)</Text>
        <Text style={styles.sizeText}>窗口宽度 ：{windowWidth} dp</Text>
        <Text style={styles.sizeText}>窗口高度 ：{windowHeight} dp</Text>
      </View>

      <View style={styles.card}>
        <Text style={styles.cardTitle}>基础尺寸计算 (业务常用)</Text>
        <Text style={styles.sizeText}>屏幕宽高比 ：{(screenWidth / screenHeight).toFixed(2)}</Text>
        <Text style={styles.sizeText}>窗口一半宽度 ：{windowWidth / 2} dp</Text>
        <Text style={styles.sizeText}>安全区高度 ：{windowHeight - 88} dp</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f7f8fa',
    padding: 20,
    gap: 15
  },
  title: {
    fontSize: 20,
    color: '#1a1a1a',
    fontWeight: '600',
    marginBottom: 10
  },
  card: {
    width: '100%',
    padding: 18,
    backgroundColor: '#fff',
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#e5e5e5'
  },
  cardTitle: {
    fontSize: 16,
    color: '#007DFF',
    fontWeight: '500',
    marginBottom: 12
  },
  sizeText: {
    fontSize: 14,
    color: '#333',
    lineHeight: 24
  }
});

export default RNDimensionsBasic;

三、实战二：业务完整版 - 尺寸适配 + 横竖屏监听

import React, { useState, useEffect } from 'react';
import { View, Text, Dimensions, StyleSheet } from 'react-native';

const RNDimensionsBusiness = () => {
  const [screenSize, setScreenSize] = useState(Dimensions.get('screen'));
  const [windowSize, setWindowSize] = useState(Dimensions.get('window'));

  useEffect(() => {
    // 添加尺寸变化监听
    const sizeChangeListener = Dimensions.addEventListener('change', ({ screen, window }) => {
      setScreenSize(screen);
      setWindowSize(window);
      console.log('鸿蒙设备 横竖屏切换', screen.width, screen.height);
    });

    return () => {
      sizeChangeListener.remove();
    };
  }, []);

  const { width: windowW, height: windowH } = windowSize;
  // 1、根据屏幕宽度，动态计算组件宽度 
  const adaptiveWidth = windowW * 0.9;
  // 2、根据屏幕宽度，动态设置栅格布局列数 
  const gridColumns = windowW >= 800 ? 3 : windowW >= 500 ? 2 : 1;
  // 3、安全区高度：剔除状态栏+导航栏，适配刘海屏/全面屏
  const safeAreaHeight = windowH - 90;
  // 4、判断横竖屏状态
  const isLandscape = windowW > windowH;

  return (
    <View style={[styles.container, { backgroundColor: isLandscape ? '#f0f7ff' : '#f7f8fa' }]}>
      <Text style={styles.title}>RN鸿蒙 · 屏幕尺寸获取</Text>
      <Text style={styles.orientText}>{isLandscape ? '当前：横屏模式' : '当前：竖屏模式'}</Text>

      <View style={styles.infoCard}>
        <Text style={styles.cardTitle}>实时尺寸数据 (鸿蒙原生获取)</Text>
        <Text style={styles.infoText}>屏幕宽：{screenSize.width} dp | 屏幕高：{screenSize.height} dp</Text>
        <Text style={styles.infoText}>窗口宽：{windowSize.width} dp | 窗口高：{windowSize.height} dp</Text>
        <Text style={styles.infoText}>适配列数：{gridColumns}列 | 安全区高度：{safeAreaHeight} dp</Text>
      </View>

      <View style={[styles.adaptiveBox, { width: adaptiveWidth, height: adaptiveWidth / 2 }]}>
        <Text style={styles.boxText}>✅ 自适应组件</Text>
        <Text style={styles.boxText}>宽度：{adaptiveWidth.toFixed(0)} dp</Text>
      </View>

      <Text style={styles.tipText}>OpenHarmony6.0 完美适配：横竖屏切换自动更新尺寸与布局</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    gap: 20
  },
  title: {
    fontSize: 20,
    color: '#1a1a1a',
    fontWeight: '600'
  },
  orientText: {
    fontSize: 15,
    color: '#007DFF',
    fontWeight: '500'
  },
  infoCard: {
    width: '100%',
    padding: 15,
    backgroundColor: '#fff',
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#e5e5e5'
  },
  cardTitle: {
    fontSize: 16,
    color: '#333',
    fontWeight: '500',
    marginBottom: 10
  },
  infoText: {
    fontSize: 13,
    color: '#666',
    lineHeight: 22
  },
  adaptiveBox: {
    backgroundColor: '#007DFF',
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOpacity: 0.1,
    shadowRadius: 5
  },
  boxText: {
    fontSize: 15,
    color: '#fff',
    fontWeight: '500',
    margin: 5
  },
  tipText: {
    fontSize: 12,
    color: '#999',
    textAlign: 'center',
    marginTop: 10
  }
});

export default RNDimensionsBusiness;

四、扩展用法：Dimensions 实用进阶技巧

基于 RN 内置的 Dimensions API，无需引入任何第三方库，即可实现一些实用的进阶功能，贴合真实开发需求，所有技巧均在 OpenHarmony6.0 真机实测通过，帮助你吃透 Dimensions 的全部用法，举一反三，应对所有复杂的尺寸适配场景！

扩展 1：封装全局尺寸工具类

// utils/sizeUtil.js (全局尺寸工具类)
import { Dimensions } from 'react-native';

// 全局常量：窗口宽高
export const WINDOW_WIDTH = Dimensions.get('window').width;
export const WINDOW_HEIGHT = Dimensions.get('window').height;

// 全局常量：屏幕宽高
export const SCREEN_WIDTH = Dimensions.get('screen').width;
export const SCREEN_HEIGHT = Dimensions.get('screen').height;

// 工具方法：根据屏幕宽度适配尺寸 (传入设计稿px，自动转dp)
export const adaptiveSize = (size) => {
  const designWidth = 375; // 设计稿宽度
  return (size / designWidth) * WINDOW_WIDTH;
};

// 工具方法：判断是否为大屏设备 (鸿蒙平板/智慧屏)
export const isLargeScreen = () => WINDOW_WIDTH >= 800;

// 调用示例：在任意页面导入使用
// import { WINDOW_WIDTH, adaptiveSize } from '../utils/sizeUtil';

扩展 2：结合 PixelRatio 实现高清图片适配

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

// 获取设备像素比
const pixelRatio = PixelRatio.get();
// 获取屏幕物理像素 (px)
const screenPxWidth = Dimensions.get('window').width * pixelRatio;
// 高清图片适配：根据物理像素加载对应分辨率的图片
const imgSource = screenPxWidth >= 1080 ? require('../img/hd_img.png') : require('../img/nor_img.png');

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net