当前位置：首页 > news >正文

0 基础入门React Native鸿蒙跨平台开发：useWindowDimensions会在屏幕尺寸变化时自动更新获取到的设备width和height值

news 2026/7/22 17:21:28

本文是基于HarmonyOS API 24的进行的ReactNative 鸿蒙跨平台开发依托适配鸿蒙的 RN 运行层，使用 React 与 JS 编写一套业务代码，无需大量 ArkTS 原生开发，通用业务实现代码复用，支持按需扩展原生桥调用鸿蒙特有能力，有效降低多平台开发维护成本。

ReactNative 鸿蒙跨平台开发，简单来说就是基于 ReactNative 技术栈，依托鸿蒙平台适配层，使用 JavaScript 与 React 语法编写一套业务代码，经过编译适配后同时支撑鸿蒙应用、安卓、iOS 等多端运行的开发方案。开发者沿用前端熟悉的组件化、状态管理等 React 开发范式，不用分别针对鸿蒙原生 ArkTS、安卓原生、iOS 原生独立实现相同业务逻辑，依靠桥接层完成 JS 逻辑与鸿蒙原生能力的通信，调用鸿蒙的窗口、媒体、设备硬件等系统接口，最终打包生成鸿蒙应用安装包，兼顾开发效率与多端复用能力，同时也存在部分鸿蒙特有系统能力需要编写原生桥模块进行扩展适配，复杂交互、高性能场景下要权衡跨平台通用方案与原生开发的取舍。

ReactNative 鸿蒙跨平台开发优势：

1.前端开发者直接复用已有的 React 开发经验与存量业务代码，一套代码可同时产出鸿蒙、安卓、iOS 多端应用，大幅降低多平台分别开发、维护的人力与时间成本，迭代更新时多数业务改动只需修改一处代码就能同步生效
2.借助 JS 热更新机制还能绕过应用商店快速推送功能修复与轻度版本变更
3.依托成熟的 React 生态，海量第三方组件、工具库可以直接接入，不用从零适配鸿蒙原生开发体系，上手门槛更低
4.熟悉网页与 React 技术的开发人员可以快速转型参与鸿蒙应用建设；
5.框架内置 JS 与原生的通信桥，基础 UI、网络、存储等通用设备能力开箱可用

大部分常规业务场景无需编写原生扩展模块，同时支持按需开发鸿蒙原生桥接模块调用系统独有能力，在跨端复用和平台特性之间保留灵活平衡，相比纯原生多端开发，团队可以更快完成产品落地，适合业务频繁迭代、需要同时覆盖多终端的中小型应用场景。

–

useWindowDimensions

import{useWindowDimensions}from'react-native';

useWindowDimensions会在屏幕尺寸变化时自动更新获取到的设备width和height值。使用方法如下：

constwindowWidth=useWindowDimensions().width;constwindowHeight=useWindowDimensions().height;

好的，我们来详细了解一下 React Native 中的useWindowDimensionsHook。

useWindowDimensions是 React Native 提供的一个强大的 Hook，用于在函数组件中获取当前窗口（或屏幕）的尺寸信息，并且它具备自动更新的能力，非常适合构建响应式界面。

核心功能与优势

与传统的DimensionsAPI 相比，useWindowDimensions的最大优势在于响应式。

自动更新：当设备方向改变（横屏/竖屏）、可折叠设备屏幕展开/折叠、或系统字体大小变化时，useWindowDimensions会自动重新渲染组件并提供最新的尺寸数据。
函数组件首选：对于函数组件，React 官方文档明确推荐使用useWindowDimensions而不是DimensionsAPI，因为它更符合 Hook 的编程范式，能更好地管理副作用。

基本使用方法

import { useWindowDimensions } from 'react-native'; function MyComponent() { // 使用 Hook 获取当前窗口的宽高 const { width, height } = useWindowDimensions(); return ( <View style={{ width: '100%', height: '100%' }}> <Text>屏幕宽度: {width}</Text> <Text>屏幕高度: {height}</Text> </View> ); }

返回的属性详解

useWindowDimensions返回一个包含以下属性的对象：

属性	类型	说明
`width`	`number`	窗口或屏幕的宽度（以像素为单位）。这是最常用的属性。
`height`	`number`	窗口或屏幕的高度（以像素为单位）。这是最常用的属性。
`scale`	`number`	设备的像素密度比例。例如，1 表示标准分辨率（96 DPI），2 表示高清屏（Retina 显示屏）。
`fontScale`	`number`	系统字体缩放比例。用户可以在系统设置中调整字体大小，此属性可以获取到当前的实际缩放值，有助于实现字体大小自适应。

重要注意事项与最佳实践

避免缓存尺寸值：
虽然尺寸信息在组件首次渲染时可用，但它可能会在后续因设备方向变化等原因而改变。因此，不要将获取到的width或height值缓存起来（例如存入变量或状态），而应在每次渲染时都通过useWindowDimensions()获取最新值。

适用于内联样式：
基于尺寸的样式计算，建议使用内联样式（Inline Styles）或动态样式生成函数，而不是在StyleSheet.create中预先定义。

// 推荐：使用内联样式 <View style={{ width: useWindowDimensions().width * 0.5 }} /> // 不推荐：缓存值（可能导致适配错误） const { width } = useWindowDimensions(); const styles = StyleSheet.create({ container: { width: width * 0.5, // 错误！width 可能过期 } });

结合其他工具实现完整适配：
useWindowDimensions主要提供的是窗口尺寸。为了构建健壮的自适应界面，通常还需要结合其他工具：
- SafeAreaView：确保内容在设备的安全区域（如刘海屏、圆角屏）内显示，避免被遮挡。
- Platform模块：根据运行平台（iOS、Android）应用不同的样式或逻辑。
- 第三方库：如react-native-responsive-dimensions等，可以提供更高级的响应式单位（如%、vh、vw）和 Hook。

与 Dimensions API 的对比

特性	`useWindowDimensions`(Hook)	`Dimensions`(API)
适用组件	函数组件	所有组件（函数和类）
自动更新	是，方向变化时自动重新渲染	否，需要手动监听`change`事件
使用便捷性	更符合 Hook

实际代码参考：

importReactfrom"react";import{View,StyleSheet,Text,useWindowDimensions}from"react-native";constApp=()=>{constwindow=useWindowDimensions();return(<View style={styles.container}><Text>{`Window Dimensions: height -${window.height}, width -${window.width}`}</Text></View>);}conststyles=StyleSheet.create({container:{flex:1,justifyContent:"center",alignItems:"center"}});exportdefaultApp;