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

本文是基于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返回一个包含以下属性的对象：

重要注意事项与最佳实践

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

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

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

3. 结合其他工具实现完整适配：
   useWindowDimensions主要提供的是窗口尺寸。为了构建健壮的自适应界面，通常还需要结合其他工具：

   • SafeAreaView：确保内容在设备的安全区域（如刘海屏、圆角屏）内显示，避免被遮挡。
   • Platform模块：根据运行平台（iOS、Android）应用不同的样式或逻辑。
   • 第三方库：如react-native-responsive-dimensions等，可以提供更高级的响应式单位（如%、vh、vw）和 Hook。

与 Dimensions API 的对比

实际代码参考：

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;

这段React Native代码实现了一个动态窗口尺寸显示应用，其核心功能是实时监测设备屏幕的宽度和高度，并通过用户界面直观地反馈当前尺寸。代码通过React Hooks和React Native的尺寸监听机制，构建了一个响应式布局组件。

在组件初始化阶段，代码使用useWindowDimensions Hook获取设备的当前窗口尺寸。这个Hook返回一个包含height和width属性的对象，分别表示屏幕的高度和宽度。通过解构赋值，代码将这两个值存储在window常量中。

组件的渲染逻辑基于StyleSheet.create定义的样式系统。container样式配置了flex: 1属性，使容器占据整个屏幕空间，并通过justifyContent和alignItems属性实现内容的垂直和水平居中对齐。这种布局设计确保了文本内容在不同设备上都能保持良好的视觉效果。

Text组件通过模板字符串动态显示窗口尺寸信息，格式为"Window Dimensions: height - [高度值], width - [宽度值]"。这种实时更新机制使得用户能够随时查看当前设备的屏幕尺寸，这对于开发响应式应用或调试布局问题非常有用。

整个应用的架构体现了React Hooks在状态管理中的现代应用。通过useWindowDimensions Hook，代码实现了对设备尺寸的实时监听，避免了手动计算和事件监听的复杂性。同时，这种声明式的UI设计模式确保了界面与数据的一致性，符合React的函数式编程理念。

安装DevEco Studio程序

选择目标安装目录：

设置环境变量，但是需要重启一下：

新建一个空白模板：

设置API为24的模板项目：

初始化项目，自动下载相关依赖：

打包

接下来通过打包命令npn run harmony将reactNative的代码打包成为bundle，这样可以进行在开源鸿蒙OpenHarmony中进行使用。

最后运行效果图如下显示：