HarmonyOS鸿蒙Next中RN实现区域避让开发指导

HarmonyOS鸿蒙Next中RN实现区域避让开发指导

一、概述

在移动应用开发中，不同设备的屏幕形态各异，如刘海屏、全面屏、折叠屏等，同时系统状态栏、导航栏、软键盘等元素也会占据屏幕空间。为了确保应用内容在各种设备和场景下都能正常显示，不被遮挡，RN（RN 是React Native 的简称，是一个使用JavaScript 和React 开发跨平台移动应用的框架）提供了一系列区域避让的机制和接口。本文将详细介绍 RN 区域避让的实现原理、适配指导以及具体的场景案例。

使用场景

典型应用全屏窗口UI元素包括状态栏、应用界面和底部导航条，其中状态栏和导航条，通常在沉浸式布局下称为避让区，避让区之外的区域称为安全区。界面元素在不同设备上存在差异，下面是不同设备上状态栏、挖孔区、导航栏的位置差异，包括：直板机、PAD、PC、折叠屏（小折叠、双折、三折）。

说明

下图中标记区域含义：1为状态栏、2为挖孔区、3为导航栏。

直板机界面元素示意图

图1 直板机界面元素示意图

PAD界面元素示意图

图2 PAD界面元素示意图

PC界面元素示意图

图3 PC界面元素示意图

折叠屏--小折叠界面元素示意图（左图展开态 右图折叠态）

图4 折叠屏–小折叠界面元素示意图（左图展开态 右图折叠态）

折叠屏--双折叠界面元素示意图（左图折叠态 右图展开态）

图5 折叠屏–双折叠界面元素示意图（左图折叠态 右图展开态）

折叠屏--三折叠界面元素示意图（左图折叠态 右图二屏折叠态 下图三屏全展开态）

图6 折叠屏–三折叠界面元素示意图（左图折叠态 右图二屏折叠态 下图三屏全展开态）

安全区布局场景

布局系统保持安全区内布局，确保应用内容不会延伸到状态栏、导航栏区域。

安全区布局+背景沉浸模式

布局系统保持安全区内布局，然后延伸绘制内容（如背景色、背景图）到状态栏和导航条区域，实现沉浸式效果。

全局布局+避让场景

布局系统保持全局布局，通过相关接口获取避让区域位置、大小等信息，调整元素位置，确保不会被避让区遮挡。


更多关于HarmonyOS鸿蒙Next中RN实现区域避让开发指导的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS Next中，RN（React Native）实现区域避让可通过以下方式：

使用鸿蒙原生避让能力接口，需调用@ohos.avoidance模块的getAvoidArea方法获取避让区域数据。开发者需在ArkUI中通过AvoidAreaContext接收系统返回的避让区域信息（如状态栏/导航栏区域），并在RN层通过NativeModules机制调用这些原生能力。布局时需动态计算并避开这些区域，使用onAvoidAreaChange回调监听区域变化。注意避让数据单位为vp，需转换为RN使用的像素单位。

更多关于HarmonyOS鸿蒙Next中RN实现区域避让开发指导的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中使用React Native实现区域避让，可以通过@hadss/react_native_avoid_area库提供的API来处理不同设备的屏幕形态差异。以下是关键实现要点：

  1. 核心API：
  • getWindowAvoidArea(type: AvoidAreaType)：获取指定类型的避让区域信息（状态栏、刘海屏、导航栏等）
  • addAvoidAreaListener(callback)：监听避让区域变化（如键盘弹出/收起）
  • removeAvoidAreaListener()：移除监听
  1. 典型场景实现：
  • 安全区布局：通过获取系统状态栏和导航栏高度，设置外层容器的padding
  • 沉浸式布局：在安全区布局基础上延伸背景到系统栏区域
  • 全局布局+动态避让：获取挖孔区/刘海屏位置信息，动态调整UI元素位置
  1. 折叠屏适配：
  • 使用FolderStack组件实现悬停态自动避让折痕区
  • 使用FoldSplitContainer组件管理二分栏/三分栏布局
  1. 代码示例：
// 获取避让区域
const avoidArea = Avoid.getWindowAvoidArea(AvoidAreaType.TYPE_SYSTEM);
const statusBarHeight = avoidArea.topRect.height / PixelRatio.get();

// 监听变化
Avoid.addAvoidAreaListener((data) => {
  if(data.type === AvoidAreaType.TYPE_CUTOUT){
    // 处理刘海屏区域变化
  }
});

完整示例代码可参考开源仓中的avoid_area_sample。

回到顶部