本文是基于HarmonyOS API 24的进行的React Native跨平台技术实战项目

React Native 跨端鸿蒙开发，行业简称 RNOH（React Native OpenHarmony），是社区 + 华为共建的适配层方案：把 Meta 的 React Native 框架完整移植到鸿蒙（HarmonyOS NEXT / OpenHarmony），让一套 React/JS/TS 代码，同时运行在Android、iOS、鸿蒙手机 / 平板 / PC多端，属于原生级跨端方案，区别于 WebView 套壳网页方案。

简单一句话：前端工程师不用学 ArkTS，用熟悉的 React 语法写业务，底层自动映射成鸿蒙 ArkUI 原生控件，打包成鸿蒙标准 hap 应用上架应用市场。

它的核心定位可以概括为：不改变 React/TypeScript 前端研发习惯，复用现有 RN 业务代码资产，依托鸿蒙系统底层接口做一层高性能中间适配层，将 JSX 组件、JS 业务逻辑映射为鸿蒙原生 ArkUI 控件，最终构建可在手机、平板、车机、智慧屏、PC 等全鸿蒙设备运行、支持上架华为应用市场的原生级应用。和 UniApp、WebView 套壳等网页类跨端方案有本质区别，RNOH 不依赖浏览器内核渲染页面，所有 UI 渲染、手势交互、视图层级全部交给鸿蒙系统原生图形引擎处理，不存在网页性能瓶颈、样式兼容偏差等问题。

兼容完整 React 生态、Hooks、JSX、RN 标准组件，前端工程师无需学习 ArkTS、ArkUI 声明式语法，仅需少量平台兼容代码即可完成多端适配；底层打通鸿蒙 NAPI、ArkUI C 底层接口，兼顾代码复用性与鸿蒙原生能力调用，核心面向存量 RN App 快速新增鸿蒙渠道，是前端团队切入鸿蒙生态最低成本的技术路线。

---

在开发移动端的时候，经常会使用到屏幕的宽高，在React Native中，可以通过Dimensions API来获取屏幕的宽高。在React Native开发中，获取设备屏幕尺寸是一项常见需求，尤其是在布局设计和适配不同设备时。

在React Native鸿蒙开发中，获取可视窗口的高度与宽度主要通过Dimensions API实现。在React Native鸿蒙开发中，通过Dimensions API获取可视窗口高度与宽度主要为了‌实现跨设备的界面适配‌。由于鸿蒙设备形态多样（手机、平板、折叠屏等），屏幕尺寸各不相同，使用Dimensions可以确保你的应用在不同设备上都能正确显示。

Dimensions API是React Native中用于获取设备屏幕尺寸的工具。通过它，开发者可以轻松获取屏幕的宽度、高度、缩放比等信息。以下是Dimensions API的核心功能：

• 获取屏幕宽度和高度：通过Dimensions.get(‘window’)可以获取当前设备的屏幕尺寸。
• 获取设备缩放比：通过Dimensions.get(‘window’).scale可以获取设备的缩放比。
• 获取字体缩放比：通过Dimensions.get(‘window’).fontScale可以获取设备的字体缩放比。

‌核心方法‌

React Native提供了一个名为Dimensions的API，能够轻松获取屏幕的宽度、高度和缩放比等信息，使用Dimensions.get(‘window’)可以获取当前设备的窗口尺寸信息：

import { Dimensions } from 'react-native';

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

自适应用户界面，React Native 提供组件和 api 来适应设备大小和方向的变化。因为用户可能拥有不同的设备，从小型手机到更大的平板电脑，所以必须确保应用的 UI 能够适应这些变化。首先我们介绍的是 Dimensions API。

‌推荐方案：useWindowDimensions Hook‌

对于React函数组件，更推荐使用useWindowDimensions Hook。与Dimensions不同，它会在屏幕尺寸变化时自动更新，更适合响应式布局。

‌注意事项‌

• 通过Dimensions获取的尺寸信息虽然立即可用，但可能会在设备方向改变等情况下发生变化
• 基于尺寸的渲染逻辑和样式应当在每次render后调用，而不是将值保存下来
• 对于可折叠设备等屏幕尺寸可变的设备，建议使用事件监听或useWindowDimensions

‌实践建议‌

在实际开发中，建议优先使用useWindowDimensions Hook来确保界面在屏幕尺寸变化时能够正确适配，特别是在鸿蒙这种支持多种形态设备的平台上。

---

安装DevEco Studio程序

选择目标安装目录：

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

新建一个空白模板：

设置API为24的模板项目：

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

---

完整代码：

import React from 'react';
import { View, Text, Image, ScrollView, TextInput, Dimensions } from 'react-native';
 
//获取屏幕的宽高
const screenWidth =Math.round( Dimensions.get('window').width);
const screenHight =Math.round( Dimensions.get('window').height);

function App() {
  return (
    <View style={{ backgroundColor:'aqua',flex: 1 ,flexDirection: 'row',width:'50%'}}>
      <Text style={{color:'red',fontSize:50}}>jsx</Text>
      <Text style={{color:'blue'}}>jsx</Text>
      <View style={{backgroundColor:'yellow',flex:1,width:screenWidth/2,height:screenHight/2}}>
        <Text>屏幕宽度和高度的一半</Text>
      </View>
    </View>
    
  );
}
 
export default App;

概念	描述	适用场景
Dimensions API	用于获取设备屏幕尺寸的API	屏幕适配、布局设计
StyleSheet API	用于定义样式规则的API	样式定义、组件美化
LayoutAnimation API	用于实现布局动画的API	动画效果、交互设计
PixelRatio API	用于获取设备像素比的API	图片适配、高精度渲染

---

onLayout 回调函数介绍：

• （1）React Native 开发的应用可以有一个或者多个根 View（没有父组件）。
• （2）在不指定根 View 的宽高（并将其 flex 样式设为 1）的情况下，通过指定这个根 View 组件的回调函数可以很方便地得到设备的放置状态。
  • 当设备横置时，通过 onLayout 回调取到的根 View 宽大于高。
  • 当设备竖置时，通过 onLayout 回调取到的根 View 宽小于高。
• （3）同时 onLayout 回调函数还可以用来监测设备放置状态的改变，并得到改变后的新的屏幕高度和宽度。

import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 Dimensions,
 View,
 Text,
} from 'react-native';
 
class Main extends Component {
   //根View的onLayout回调函数
   _onLayout(event) {
     //使用大括号是为了限制let结构赋值得到的变量的作用域，因为接来下还要结构解构赋值一次
     {
       //获取根View的宽高，以及左上角的坐标值
       let {x, y, width, height} = event.nativeEvent.layout;
       console.log('通过onLayout得到的宽度：' + width);
       console.log('通过onLayout得到的高度：' + height);
     }
 
     //通过Dimensions API获取屏幕宽高
     let {width, height} = Dimensions.get('window');
     console.log('通过Dimensions得到的宽度：' + width);
     console.log('通过Dimensions得到的高度：' + height);
   }
   render() {
     return (
       <View style={styles.flex} onLayout={this._onLayout}>
       </View>
     );
   }
}
 
const styles = StyleSheet.create({
  flex:{
     flex:1,  //将更View的flex样式设为1，且不指定根View的宽和高。
     alignItems: 'center'
  },
});
 
AppRegistry.registerComponent('HelloWorld', () => Main);