【HarmonyOS】day29:React Native开发实践：实现Popover组件内容自适应

前言

随着华为生态的持续演进，HarmonyOS 已成为多设备协同开发的重要平台。虽然官方主推 ArkTS + ArkUI 的原生开发范式，但社区对跨平台方案（如 React Native）在 HarmonyOS 上的适配需求依然旺盛。本文将聚焦一个典型 UI 场景------Popover（气泡弹窗）的内容自适应，结合 React Native 在 HarmonyOS 模拟器/真机上的实战经验，提供一套可落地的解决方案。

---

一、为什么需要 Popover 内容自适应？

Popover 常用于展示上下文菜单、提示信息或操作面板。其核心挑战在于：

• 内容长度动态变化（如多语言、用户输入）
• 屏幕尺寸多样（手机、平板、折叠屏）
• 需避免内容溢出或布局错位

理想效果：Popover 宽高根据子内容自动调整，并智能避让屏幕边界。

---

二、技术选型与环境准备

1. 开发环境

• React Native 版本：0.74+（支持新架构）
• HarmonyOS SDK ：通过 React Native for OpenHarmony 社区项目适配
• 构建工具：DevEco Studio + Metro Bundler
• 目标设备：HarmonyOS 3.1+ 手机/模拟器

⚠️ 注意：目前 React Native 并非 HarmonyOS 官方一级支持框架，需依赖社区桥接层。建议仅用于已有 RN 项目迁移或实验性开发。

---

三、实现 Popover 自适应的关键步骤

步骤 1：使用 measure 获取内容尺寸

React Native 提供 onLayout 和 measure API 获取组件实际宽高。

const Popover = ({ children, targetRef }) => {
  const [contentSize, setContentSize] = useState({ width: 0, height: 0 });
  const contentRef = useRef<View>(null);

  useEffect(() => {
    // 测量内容区域尺寸
    contentRef.current?.measure((x, y, width, height) => {
      setContentSize({ width, height });
    });
  }, [children]);

  return (
    <View style={styles.popoverContainer}>
      <View
        ref={contentRef}
        onLayout={(e) => {
          const { width, height } = e.nativeEvent.layout;
          setContentSize({ width, height });
        }}
        style={[styles.popoverContent, { 
          width: contentSize.width || 'auto',
          height: contentSize.height || 'auto'
        }]}
      >
        {children}
      </View>
    </View>
  );
};

步骤 2：动态计算 Popover 位置（避让屏幕边界）

通过 targetRef 获取触发元素位置，结合屏幕尺寸计算安全显示区域。

import { Dimensions } from 'react-native';

const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');

// 假设从外部传入 target 坐标
const calculatePosition = (targetRect, contentSize) => {
  const padding = 8;
  let x = targetRect.x;
  let y = targetRect.y + targetRect.height + padding;

  // 右边界检测
  if (x + contentSize.width > SCREEN_WIDTH) {
    x = SCREEN_WIDTH - contentSize.width - padding;
  }
  // 下边界检测（若下方空间不足，则显示在上方）
  if (y + contentSize.height > SCREEN_HEIGHT) {
    y = targetRect.y - contentSize.height - padding;
  }

  return { left: Math.max(padding, x), top: Math.max(padding, y) };
};

步骤 3：整合为可复用组件

interface PopoverProps {
  visible: boolean;
  children: React.ReactNode;
  targetRef: React.RefObject<View>;
}

export const AdaptivePopover: React.FC<PopoverProps> = ({
  visible,
  children,
  targetRef,
}) => {
  const [position, setPosition] = useState({ left: 0, top: 0 });
  const [contentSize, setContentSize] = useState({ width: 0, height: 0 });
  const popoverRef = useRef<View>(null);

  useEffect(() => {
    if (!visible || !targetRef.current) return;

    // 获取触发元素位置
    targetRef.current.measureInWindow((x, y, width, height) => {
      const targetRect = { x, y, width, height };
      
      // 先渲染内容以获取尺寸（异步）
      requestAnimationFrame(() => {
        popoverRef.current?.measure((px, py, pWidth, pHeight) => {
          setContentSize({ width: pWidth, height: pHeight });
          setPosition(calculatePosition(targetRect, { width: pWidth, height: pHeight }));
        });
      });
    });
  }, [visible]);

  if (!visible) return null;

  return (
    <View style={styles.overlay}>
      <View
        ref={popoverRef}
        style={[
          styles.popover,
          {
            position: 'absolute',
            left: position.left,
            top: position.top,
            width: contentSize.width || 'auto',
            maxWidth: SCREEN_WIDTH - 32, // 限制最大宽度
          },
        ]}
      >
        {children}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  overlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  popover: {
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 5, // Android/HarmonyOS 阴影
  },
});

---

四、HarmonyOS 适配注意事项

1. 阴影效果 ：HarmonyOS 使用 elevation 实现阴影，与 Android 一致，iOS 则需 shadow* 属性。
2. 屏幕安全区 ：使用 SafeAreaView 或 react-native-safe-area-context 处理刘海屏/挖孔屏。
3. 性能优化 ：频繁调用 measure 可能影响帧率，建议配合 useCallback 和防抖。
4. 折叠屏适配 ：监听 Dimensions 变化，动态重算 Popover 位置。

---

五、总结

在 HarmonyOS 上通过 React Native 实现自适应 Popover，核心在于：

✅ 动态测量内容尺寸

✅ 智能避让屏幕边界

✅ 跨设备兼容性处理

虽然当前 RN 在 HarmonyOS 生态中仍属"非主流"，但借助社区力量，我们完全可以在保留现有技术栈的同时，为鸿蒙用户提供流畅体验。未来，随着 React Native OpenHarmony 项目的成熟，这类跨端实践将更具可行性。

---

延伸阅读：

• OpenHarmony React Native 适配指南
• React Native 官方文档：Layout Measurement

💡 你是否也在探索 React Native 与 HarmonyOS 的结合？欢迎在评论区分享你的经验！

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