OpenHarmony + RN：Overlay遮罩层组件

摘要：本文深入探讨React Native在OpenHarmony 6.0.0 (API 20)平台上实现Overlay遮罩层组件的技术细节。通过分析React Native与OpenHarmony的桥接机制，详细讲解Overlay组件的原理、基础用法和平台适配要点，并提供一个完整的实战案例。文章包含两个mermaid图表和两个实用表格，帮助开发者掌握在OpenHarmony环境下高效使用遮罩层组件的最佳实践，避免常见的兼容性问题和性能陷阱。读者将获得在开源鸿蒙平台上构建专业级遮罩层交互体验的实用技能。

1. Overlay 组件介绍

在移动应用开发中，遮罩层(Overlay)是一种常见的UI模式，用于创建覆盖在现有内容之上的视觉层，通常用于模态对话框、加载指示器、操作确认等场景。遮罩层能够有效引导用户注意力，同时暂时禁用底层内容的交互，提升用户体验的连贯性和操作安全性。

1.1 Overlay的技术原理

在React Native中，Overlay的实现主要依赖于绝对定位(Absolute Positioning)和zIndex层级管理。不同于Web开发中的<div>堆叠，React Native通过View组件的样式属性来控制元素在Z轴上的堆叠顺序。当创建遮罩层时，通常会：

1. 使用一个覆盖整个屏幕的View作为背景层
2. 设置半透明背景色(如rgba(0,0,0,0.5))
3. 将内容区域置于遮罩层之上
4. 通过状态管理控制显示与隐藏

在标准React Native环境中，视图层级由渲染顺序和zIndex共同决定，但在跨平台实现中，特别是OpenHarmony这样的新兴平台，底层渲染机制存在差异，需要特别注意。

1.2 遮罩层的核心应用场景

遮罩层在实际开发中有多种典型应用场景：

• 模态对话框：确认操作、提示信息等需要用户立即响应的场景
• 加载指示器：数据加载时显示进度，同时禁用交互
• 操作引导：新功能引导、界面元素高亮提示
• 表单验证：表单提交失败时显示错误信息
• 菜单展示：下拉菜单、操作列表等需要覆盖其他内容的UI

在OpenHarmony平台上，这些场景的实现需要考虑平台特有的UI渲染机制和事件处理流程。

1.3 Overlay在OpenHarmony中的渲染流程

React Native for OpenHarmony的渲染流程与标准RN有所不同，特别是在处理Overlay这类需要精确控制视图层级的组件时。下图展示了Overlay组件在OpenHarmony平台上的完整渲染流程：

流程图解析：

1. JS层创建Overlay组件时，首先判断当前运行平台
2. 在OpenHarmony平台，通过桥接层将渲染指令发送到原生层
3. 原生层创建对应的HarmonyOS UI组件，处理视图层级关系
4. 计算zIndex和透明度等样式属性，完成遮罩层渲染
5. 事件处理阶段，系统判断点击位置是否在内容区域
   • 若点击内容区域，事件传递到内容组件
   • 若点击遮罩区域，触发onDismiss回调隐藏遮罩层

这个流程突显了OpenHarmony平台在处理遮罩层时的特殊性：需要通过桥接层协调JS和原生UI的渲染与交互，确保用户体验的一致性。

2. React Native与OpenHarmony平台适配要点

2.1 RN for OpenHarmony架构概述

React Native for OpenHarmony的架构基于标准RN的三层模型，但在原生层进行了适配改造：

1. JS层：运行React应用逻辑，使用标准RN API
2. 桥接层：@react-native-oh/react-native-harmony包实现JS与原生通信
3. 原生层：OpenHarmony SDK (API 20)提供的UI组件和系统能力

在OpenHarmony 6.0.0平台上，RN的渲染引擎需要适配HarmonyOS的UI框架，这导致某些组件的行为与标准RN环境存在差异，特别是涉及视图层级和事件处理的组件如Overlay。

2.2 Overlay的实现机制差异

在标准RN中，Overlay主要依赖View的绝对定位和zIndex实现，但在OpenHarmony平台上，由于UI渲染引擎的不同，实现机制有显著差异：

• 视图层级管理：OpenHarmony使用自己的视图堆栈管理，RN需要通过桥接层精确控制zIndex
• 事件传递机制：OpenHarmony的事件分发与Android/iOS不同，需要特殊处理点击穿透问题
• 动画实现：OpenHarmony的动画系统与RN标准动画库存在兼容性问题

2.3 桥接层工作机制

@react-native-oh/react-native-harmony包作为RN与OpenHarmony之间的桥梁，负责以下关键任务：

1. UI组件映射：将RN的View组件映射为OpenHarmony的Component
2. 事件转换：将OpenHarmony的触摸事件转换为RN标准事件
3. 样式处理：处理RN样式到OpenHarmony样式的转换
4. 生命周期管理：协调RN组件与OpenHarmony UI组件的生命周期

对于Overlay组件，桥接层需要特别处理视图层级和事件拦截，确保遮罩层能够正确覆盖内容并处理点击事件。

2.4 RN标准实现与OpenHarmony实现对比

下表详细对比了Overlay组件在标准RN环境和OpenHarmony平台上的实现差异：

特性	React Native标准实现	OpenHarmony 6.0.0 (API 20)实现	差异说明
视图层级	通过zIndex和渲染顺序控制	通过桥接层精确控制原生视图层级	OpenHarmony需要更精确的层级管理
事件处理	自动处理点击穿透	需要显式设置pointerEvents	OpenHarmony默认不处理点击穿透
动画支持	支持所有RN动画API	仅支持基础动画，复杂动画性能较差	OpenHarmony动画系统有限制
透明度处理	rgba颜色直接支持	需要特殊处理透明度计算	OpenHarmony颜色系统有差异
渲染性能	通常较好	在低端设备上可能有卡顿	OpenHarmony渲染优化空间较大
模态行为	通过Modal组件实现	需要自定义实现模态行为	OpenHarmony缺少原生Modal支持

关键差异点分析：

• 事件处理：在OpenHarmony上，遮罩层默认不会拦截点击事件，需要设置pointerEvents="box-none"或"box-only"来控制事件传递
• 动画性能：OpenHarmony对复杂动画的支持有限，建议使用简单的淡入淡出效果
• 透明度计算：OpenHarmony对RGBA颜色的处理与标准RN略有不同，可能导致视觉差异

理解这些差异对于在OpenHarmony平台上正确实现Overlay组件至关重要，开发者需要根据平台特性调整实现方式。

3. Overlay基础用法

3.1 创建基本遮罩层

在React Native中创建基本遮罩层的核心思路是使用一个覆盖全屏的半透明View，然后在其上放置内容区域。在OpenHarmony平台上，实现方式基本一致，但需要注意平台特定的细节。

3.2 核心API与属性

Overlay组件的核心属性包括：

• visible：控制遮罩层显示/隐藏的布尔值
• onDismiss：点击遮罩层时触发的回调函数
• animationType：显示/隐藏的动画类型
• children：遮罩层上的内容组件
• pointerEvents：控制触摸事件传递方式

在OpenHarmony 6.0.0平台上，某些属性的行为可能与标准RN有所不同，需要特别注意。

3.3 样式配置要点

遮罩层的样式配置是确保良好用户体验的关键：

• 背景色：通常使用半透明黑色，如rgba(0, 0, 0, 0.5)
• 定位：必须使用position: 'absolute'并覆盖全屏
• zIndex：确保足够高，覆盖其他内容
• 内容区域：通常居中显示，有固定宽度和圆角

在OpenHarmony平台上，由于渲染引擎的差异，某些样式属性可能需要调整才能达到预期效果。

3.4 交互处理

遮罩层的交互处理主要包括：

• 点击遮罩层关闭：通常通过onDismiss回调实现
• 内容区域点击：确保点击内容区域不会触发关闭
• 键盘事件处理：在表单场景中需要特殊处理

在OpenHarmony平台上，事件处理机制与标准RN存在差异，需要通过pointerEvents属性精确控制事件传递。

3.5 Overlay组件属性详解

下表详细列出了Overlay组件的常用属性及其在OpenHarmony平台上的注意事项：

属性	类型	默认值	描述	OpenHarmony注意事项
visible	boolean	false	控制遮罩层是否可见	必须使用useState管理，避免直接硬编码
onDismiss	() => void	-	点击遮罩层触发的回调	需要确保在OpenHarmony上能正确触发
animationType	‘none’ | ‘fade’ | ‘slide’	‘fade’	显示/隐藏的动画类型	OpenHarmony仅支持’none’和’fade’
transparent	boolean	false	是否透明	在OpenHarmony上设置为true可能影响性能
pointerEvents	‘auto’ | ‘none’ | ‘box-none’ | ‘box-only’	‘auto’	控制触摸事件传递	OpenHarmony上必须设置为’box-none’才能正确拦截事件
style	ViewStyle	-	遮罩层样式	zIndex在OpenHarmony上需要足够大(>1000)
contentStyle	ViewStyle	-	内容区域样式	避免使用百分比尺寸，OpenHarmony支持有限
animationDuration	number	300	动画持续时间(ms)	OpenHarmony上过长的动画可能导致卡顿

关键属性使用提示：

• pointerEvents是OpenHarmony平台的关键属性，必须设置为'box-none'才能使遮罩层正确拦截点击事件
• zIndex在OpenHarmony上需要设置为足够大的值(通常>1000)，以确保覆盖其他内容
• animationType在OpenHarmony上仅支持'none'和'fade'，不支持'slide'动画

4. Overlay案例展示

以下是一个完整的Overlay遮罩层组件实现，已在AtomGitDemos项目中验证，可在OpenHarmony 6.0.0 (API 20)设备上正常运行。该示例展示了基本的遮罩层功能，包括显示/隐藏控制、点击遮罩层关闭、简单动画效果，以及内容区域的交互处理。

/**
 * Overlay遮罩层组件示例
 *
 * @platform OpenHarmony 6.0.0 (API 20)
 * @react-native 0.72.5
 * @typescript 4.8.4
 * 
 * 本示例展示了在OpenHarmony平台上实现遮罩层的基本方法，
 * 包括显示/隐藏控制、点击遮罩层关闭、简单动画效果等。
 * 注意：OpenHarmony平台不支持slide动画，仅支持fade和none。
 */
import React, { useState, useEffect } from 'react';
import { 
  View, 
  Text, 
  TouchableOpacity, 
  StyleSheet, 
  Animated,
  Dimensions,
  Platform,
  Easing
} from 'react-native';

// 获取屏幕尺寸
const { width, height } = Dimensions.get('window');

interface OverlayProps {
  visible: boolean;
  onDismiss: () => void;
  animationType?: 'none' | 'fade';
  children: React.ReactNode;
}

const Overlay: React.FC<OverlayProps> = ({
  visible,
  onDismiss,
  animationType = 'fade',
  children
}) => {
  // 动画值
  const [overlayOpacity] = useState(new Animated.Value(0));
  const [contentScale] = useState(new Animated.Value(0.95));
  
  // 动画持续时间
  const ANIMATION_DURATION = 250;
  
  // 处理遮罩层点击
  const handleOverlayPress = () => {
    if (animationType === 'none') {
      onDismiss();
    } else {
      // 执行隐藏动画
      Animated.parallel([
        Animated.timing(overlayOpacity, {
          toValue: 0,
          duration: ANIMATION_DURATION,
          easing: Easing.out(Easing.ease),
          useNativeDriver: Platform.OS === 'harmony'
        }),
        Animated.spring(contentScale, {
          toValue: 0.95,
          friction: 8,
          useNativeDriver: Platform.OS === 'harmony'
        })
      ]).start(() => {
        onDismiss();
      });
    }
  };
  
  // 处理内容区域点击（阻止事件冒泡）
  const handleContentPress = (e: any) => {
    e.stopPropagation();
  };
  
  // 显示/隐藏动画控制
  useEffect(() => {
    if (visible) {
      if (animationType === 'none') {
        overlayOpacity.setValue(0.5);
        contentScale.setValue(1);
      } else {
        // 执行显示动画
        Animated.parallel([
          Animated.timing(overlayOpacity, {
            toValue: 0.5,
            duration: ANIMATION_DURATION,
            easing: Easing.in(Easing.ease),
            useNativeDriver: Platform.OS === 'harmony'
          }),
          Animated.spring(contentScale, {
            toValue: 1,
            friction: 8,
            useNativeDriver: Platform.OS === 'harmony'
          })
        ]).start();
      }
    } else {
      overlayOpacity.setValue(0);
      contentScale.setValue(0.95);
    }
  }, [visible, animationType]);
  
  if (!visible) return null;
  
  return (
    <Animated.View
      style={[
        styles.overlay,
        { 
          opacity: overlayOpacity,
          pointerEvents: 'box-none' // 关键：确保OpenHarmony正确处理点击事件
        }
      ]}
      // 阻止点击事件冒泡到父组件
      onStartShouldSetResponder={() => true}
    >
      {/* 遮罩层背景 */}
      <TouchableOpacity
        style={styles.background}
        activeOpacity={1}
        onPress={handleOverlayPress}
      />
      
      {/* 内容区域 */}
      <Animated.View
        style={[
          styles.contentContainer,
          { 
            transform: [{ scale: contentScale }],
            pointerEvents: 'box-none' // 允许内容区域接收点击事件
          }
        ]}
        onStartShouldSetResponder={handleContentPress}
      >
        {children}
      </Animated.View>
    </Animated.View>
  );
};

// 使用示例
const OverlayExample = () => {
  const [isOverlayVisible, setIsOverlayVisible] = useState(false);
  
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Overlay遮罩层示例</Text>
      
      <TouchableOpacity 
        style={styles.button}
        onPress={() => setIsOverlayVisible(true)}
      >
        <Text style={styles.buttonText}>显示遮罩层</Text>
      </TouchableOpacity>
      
      <Overlay
        visible={isOverlayVisible}
        onDismiss={() => setIsOverlayVisible(false)}
        animationType="fade"
      >
        <View style={styles.overlayContent}>
          <Text style={styles.overlayTitle}>操作确认</Text>
          <Text style={styles.overlayText}>
            您确定要执行此操作吗？这将无法撤销。
          </Text>
          
          <View style={styles.buttonGroup}>
            <TouchableOpacity 
              style={[styles.overlayButton, styles.cancelButton]}
              onPress={() => setIsOverlayVisible(false)}
            >
              <Text style={styles.overlayButtonText}>取消</Text>
            </TouchableOpacity>
            
            <TouchableOpacity 
              style={[styles.overlayButton, styles.confirmButton]}
              onPress={() => {
                console.log('操作已确认');
                setIsOverlayVisible(false);
              }}
            >
              <Text style={styles.overlayButtonText}>确认</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Overlay>
    </View>
  );
};

// 样式定义
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f5f5f5'
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 30,
    color: '#333'
  },
  button: {
    backgroundColor: '#007AFF',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 8,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold'
  },
  overlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 10000, // 关键：确保在OpenHarmony上有足够高的zIndex
  },
  background: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'black',
  },
  contentContainer: {
    width: width * 0.8,
    maxWidth: 400,
    backgroundColor: 'white',
    borderRadius: 12,
    padding: 20,
    elevation: 5,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
  },
  overlayContent: {
    width: '100%',
  },
  overlayTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 15,
    color: '#333'
  },
  overlayText: {
    fontSize: 16,
    textAlign: 'center',
    marginBottom: 25,
    color: '#666',
    lineHeight: 24
  },
  buttonGroup: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    gap: 10
  },
  overlayButton: {
    flex: 1,
    paddingVertical: 12,
    borderRadius: 8,
    alignItems: 'center'
  },
  cancelButton: {
    backgroundColor: '#E0E0E0'
  },
  confirmButton: {
    backgroundColor: '#007AFF'
  },
  overlayButtonText: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 16
  }
});

export default OverlayExample;

代码解析：

1. 组件结构：Overlay组件接收visible、onDismiss等关键属性，使用Animated API实现平滑动画
2. 平台适配：通过Platform.OS === 'harmony'判断OpenHarmony平台，合理使用useNativeDriver
3. 关键设置：pointerEvents: 'box-none'确保OpenHarmony正确处理点击事件
4. zIndex处理：设置足够高的zIndex(10000)确保覆盖其他内容
5. 动画优化：针对OpenHarmony平台限制，仅使用支持的fade动画类型
6. 事件处理：精确控制事件冒泡，避免点击穿透问题

此示例已在AtomGitDemos项目中验证，使用React Native 0.72.5和OpenHarmony 6.0.0 (API 20)环境测试通过，完全符合OpenHarmony平台的适配要求。

5. OpenHarmony 6.0.0平台特定注意事项

5.1 性能优化建议

在OpenHarmony 6.0.0平台上使用Overlay组件时，性能是一个需要特别关注的问题。由于OpenHarmony的UI渲染引擎与标准RN环境不同，不当的实现可能导致明显的性能问题。

渲染性能优化

• 减少重绘区域：尽量使遮罩层内容区域保持固定尺寸，避免频繁的布局变化
• 合理使用useNativeDriver：在OpenHarmony上，仅对opacity和transform属性支持useNativeDriver
• 避免过度嵌套：简化遮罩层内部的组件结构，减少渲染复杂度
• 预加载内容：对于复杂内容，考虑提前渲染并缓存

动画性能优化

OpenHarmony对动画的支持有限，需特别注意：

• 简化动画效果：优先使用简单的淡入淡出(fade)效果，避免复杂的变换动画
• 控制动画持续时间：建议保持在200-300ms之间，过长的动画在低端设备上容易卡顿
• 避免同时执行多个动画：在OpenHarmony上，同时执行多个复杂动画可能导致帧率下降

5.2 兼容性问题处理

在OpenHarmony 6.0.0平台上使用Overlay组件时，可能会遇到以下兼容性问题：

视图层级问题

• zIndex冲突：OpenHarmony的zIndex范围与标准RN不同，建议使用较大的值(>1000)
• 系统UI覆盖：状态栏、导航栏等系统UI可能覆盖遮罩层，需特别处理

事件处理问题

• 点击穿透：默认情况下，OpenHarmony不会正确处理点击穿透，必须设置pointerEvents="box-none"
• 事件冒泡异常：在某些情况下，事件冒泡行为与标准RN不一致

样式渲染问题

• 透明度计算：OpenHarmony对RGBA颜色的处理与标准RN略有差异
• 阴影效果：elevation和shadow属性在OpenHarmony上的表现可能不同

5.3 OpenHarmony平台常见问题解决方案

下表列出了在OpenHarmony 6.0.0平台上使用Overlay组件时的常见问题及其解决方案：

问题	现象	原因	解决方案	适用场景
遮罩层点击无反应	点击遮罩层后无任何反应	未正确设置pointerEvents属性	设置pointerEvents="box-none"	所有遮罩层场景
内容区域点击穿透	点击内容区域时触发了onDismiss	事件冒泡未正确处理	在内容区域使用e.stopPropagation()	模态对话框、操作确认
动画卡顿	显示/隐藏动画不流畅	OpenHarmony动画性能限制	简化动画，减少动画属性数量	低端设备、复杂内容
遮罩层显示异常	遮罩层未完全覆盖屏幕	尺寸计算错误或定位问题	使用Dimensions获取屏幕尺寸，确保绝对定位	全屏遮罩场景
多层遮罩层冲突	多个遮罩层同时显示时层级混乱	zIndex设置不合理	为每层遮罩设置递增的zIndex值	多级模态窗口场景
透明度显示异常	遮罩层背景色与预期不符	OpenHarmony颜色处理差异	调整RGBA值，或使用十六进制+透明度	半透明遮罩场景
内容区域超出屏幕	内容区域部分显示在屏幕外	尺寸计算错误	使用百分比或maxWidth限制内容区域	响应式布局场景

5.4 平台特定实现建议

5.4.1 针对OpenHarmony的优化实现

在OpenHarmony平台上，建议采用以下实现模式来确保Overlay组件的最佳表现：

// 优化后的OpenHarmony专用Overlay实现要点
const Overlay = ({ visible, onDismiss, children }) => {
  // 1. 使用Platform判断OpenHarmony平台
  const isHarmony = Platform.OS === 'harmony';
  
  // 2. 针对OpenHarmony优化动画配置
  const animationConfig = {
    duration: isHarmony ? 200 : 300,
    useNativeDriver: isHarmony // OpenHarmony上谨慎使用
  };
  
  // 3. 确保关键样式属性正确设置
  const overlayStyle = {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: isHarmony ? 10000 : 1000, // OpenHarmony需要更高zIndex
    pointerEvents: 'box-none' // OpenHarmony关键设置
  };
  
  // 4. 简化动画，避免复杂变换
  const animateOverlay = (toValue: number) => {
    if (isHarmony) {
      // OpenHarmony上仅使用opacity动画
      Animated.timing(overlayOpacity, {
        toValue,
        duration: animationConfig.duration,
        useNativeDriver: false // OpenHarmony上某些场景需禁用
      }).start();
    } else {
      // 标准RN可使用更复杂的动画
      Animated.parallel([...]).start();
    }
  };
  
  // 其他实现...
};

5.4.2 调试技巧

在OpenHarmony平台上调试Overlay组件时，建议：

1. 使用React DevTools检查层级：验证zIndex是否按预期工作
2. 简化测试用例：从最简单的遮罩层开始，逐步添加功能
3. 监控性能指标：使用OpenHarmony性能分析工具检查帧率
4. 跨设备测试：在不同配置的OpenHarmony设备上测试表现

5.5 OpenHarmony 6.0.0平台状态图

下图展示了Overlay组件在OpenHarmony 6.0.0平台上的完整状态转换流程，帮助开发者理解其生命周期和状态变化：

状态图解析：

1. 初始状态：遮罩层处于Hidden状态
2. 显示过程：
   • 触发setVisible(true)进入AnimatingIn状态
   • 先执行淡入(fadeIn)动画
   • 再执行内容区域放大(scaleIn)动画
   • 动画完成后进入Visible状态
3. 可见状态：
   • 用户可与内容区域交互
   • 点击遮罩区域触发onDismiss
4. 隐藏过程：
   • 触发onDismiss进入AnimatingOut状态
   • 先执行淡出(fadeOut)动画
   • 再执行内容区域缩小(scaleOut)动画
   • 动画完成后回到Hidden状态

在OpenHarmony平台上，需要特别注意状态转换过程中的事件处理和样式设置，确保用户体验的一致性。

结论

本文深入探讨了React Native在OpenHarmony 6.0.0 (API 20)平台上实现Overlay遮罩层组件的技术细节。通过分析Overlay组件的原理、基础用法和平台适配要点，我们了解了在OpenHarmony环境下使用遮罩层的关键挑战和解决方案。

关键要点总结：

1. 平台差异理解：OpenHarmony与标准RN在视图层级管理、事件处理和动画实现上存在显著差异
2. 关键属性设置：pointerEvents="box-none"和足够高的zIndex是确保遮罩层正常工作的关键
3. 性能优化：针对OpenHarmony平台特性简化动画、减少重绘区域
4. 兼容性处理：针对常见问题如点击穿透、层级冲突提供解决方案

随着OpenHarmony生态的不断发展，React Native for OpenHarmony的兼容性和性能将持续提升。未来，我们期待看到更完善的平台适配、更好的性能优化以及更丰富的组件支持。对于开发者而言，掌握这些跨平台开发技巧，将有助于在开源鸿蒙生态中构建更高质量的应用。

在实际项目中，建议结合AtomGitDemos项目的实践，根据具体需求调整Overlay组件的实现。通过持续测试和优化，可以在OpenHarmony平台上实现与标准RN环境一致的用户体验。

项目源码

完整项目Demo地址：https://atomgit.com/pickstar/AtomGitDemos

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