React Native鸿蒙跨平台实现Tooltip 组件，通过 props 接收提示文本、位置和子元素，位置参数支持 top、bottom、left、right四个方向

Tooltip组件采用模块化设计，通过React.FC封装支持多方向定位的文字提示功能。核心特性包括：1) 强类型约束的Props接口，支持top/bottom/left/right四种定位；2) 容器化设计通过children属性适配各类触发元素；3) 基于useState的状态管理实现显隐控制；4) 动态定位算法通过getPositionStyle函数实现精准偏移；5) 箭头指示器增强视觉关联

xiaoqi922

379人浏览 · 2026-01-28 13:41:03

xiaoqi922 · 2026-01-28 13:41:03 发布

这个 Tooltip 提示组件采用了高度模块化的设计架构，通过清晰的职责分离实现了代码的复用性和可维护性。核心组件 Tooltip 作为独立的可复用单元，负责提示信息的显示、隐藏和定位，而 TooltipDemo 作为主容器，负责展示不同场景下的 Tooltip 使用方式。

可复用 Tooltip 组件设计

const Tooltip: React.FC<{ 
  text: string, 
  position?: 'top' | 'bottom' | 'left' | 'right', 
  children: React.ReactNode 
}> = ({ text, position = 'top', children }) => {
  // 组件实现...
};

Tooltip 组件设计为高度可配置的通用组件，通过 props 接收提示文本、位置和子元素。位置参数支持 ‘top’、‘bottom’、‘left’、‘right’ 四个方向，默认值为 ‘top’，提供了合理的默认行为。使用 children 属性使得 Tooltip 可以包裹任何 React 元素，增强了组件的通用性。

状态管理

const [visible, setVisible] = useState(false);

使用 useState Hook 管理 Tooltip 的显示/隐藏状态，初始值为 false。当用户点击包裹的元素时，通过 onPress 事件切换状态，实现了 Tooltip 的显示和隐藏。这种状态管理方式简洁明了，适合处理组件内部的交互状态。

动态定位实现

const getPositionStyle = () => {
  switch(position) { 
    case 'top': 
      return { bottom: '100%', left: '50%', transform: [{ translateX: -50 }, { translateY: 5 }] }; 
    case 'bottom': 
      return { top: '100%', left: '50%', transform: [{ translateX: -50 }, { translateY: -5 }] }; 
    case 'left': 
      return { right: '100%', top: '50%', transform: [{ translateY: -50 }, { translateX: 5 }] }; 
    case 'right': 
      return { left: '100%', top: '50%', transform: [{ translateY: -50 }, { translateX: -5 }] }; 
    default: 
      return { bottom: '100%', left: '50%', transform: [{ translateX: -50 }, { translateY: 5 }] }; 
  } 
};

通过 getPositionStyle 函数实现了不同方向的动态定位，根据 position 参数返回对应的样式对象。使用 transform 属性进行偏移校正，确保 Tooltip 能够正确对齐到目标元素的中心位置。这种计算方式确保了在不同方向下 Tooltip 的位置都能保持一致的视觉效果。

箭头指示器设计

<View style={[styles.tooltip, getPositionStyle()]}>
  <Text style={styles.tooltipText}>{text}</Text>
  <View style={[styles.tooltipArrow, { [position]: -6 }]} />
</View>

Tooltip 组件包含了一个箭头指示器，通过动态设置箭头的位置样式，使其指向目标元素。这种设计增强了 Tooltip 与目标元素的视觉关联性，提高了用户体验。

响应式

const { width } = Dimensions.get('window');

通过 Dimensions.get('window') 获取屏幕宽度，为后续的响应式布局计算提供基础。虽然在当前实现中没有直接使用这个值，但这种模式为后续的布局调整（如适配不同屏幕尺寸）预留了扩展空间。

这个 Tooltip 组件演示应用展示了 React Native 跨端开发的核心技术要点，通过高度可复用的组件设计、灵活的定位逻辑和细致的视觉样式，实现了一个功能完整、用户体验良好的 Tooltip 组件。在鸿蒙系统适配方面，通过组件映射、样式适配和布局调整，可以快速实现跨端迁移，保持功能和视觉效果的一致性。

在React Native跨端开发体系中，定位式浮层交互组件是提升应用操作体验的核心元素，而Tooltip（文字提示）作为高频使用的轻量浮层组件，其封装的核心难点在于实现多方向精准定位、浮层与触发元素的联动、跨端视觉与交互的一致性。本次解析的代码实现了一套高度通用、支持多方向展示的Tooltip组件，同时基于该组件拓展了基础提示、方向定制、状态关联、长文本适配、表单场景落地等多形态使用方式，所有核心实现均基于React Native原生API与TypeScript强类型约束，无第三方依赖，可无缝适配React Native for HarmonyOS鸿蒙桥接方案，实现Android、iOS、鸿蒙多端的原生渲染与交互一致性。本文将从通用Tooltip组件的封装设计、多方向动态定位逻辑、浮层箭头的跨端适配、状态驱动的显隐控制、鸿蒙跨端兼容核心要点等维度，深度解读该组件的技术实现思路，剖析其在跨端应用交互设计中的工程化价值。

一、技术栈

本实现延续React Native + TypeScript的核心技术栈，以函数式组件为基础，结合useState实现浮层显隐状态管理，通过原生样式与布局实现多方向定位，完成通用Tooltip组件的封装，所有技术选型均围绕鸿蒙跨端兼容、定位精准性、交互轻量性、类型安全四大核心原则展开，核心选型与技术特性如下：

基础原生组件：选用SafeAreaView、View、Text、TouchableOpacity作为核心载体，均为React Native for HarmonyOS已完成深度桥接的基础组件，底层编译为各平台原生组件（鸿蒙Component、Android View、iOS UIView），基于原生渲染引擎执行，规避WebView渲染的性能损耗与布局兼容问题，保证多端原生交互体验；
滚动与适配组件：ScrollView承担多形态Tooltip展示的滚动容器职责，桥接各平台原生滚动控件，适配鸿蒙大屏设备（平板、折叠屏）的内容展示，DimensionsAPI获取设备窗口宽度，为长文本Tooltip的最大宽度适配提供基础，二者均为跨端屏幕适配的标准能力；
React核心能力：useState实现Tooltip浮层的显隐状态管理，遵循React声明式编程与状态驱动渲染核心思想，该思想与鸿蒙ArkUI的@State装饰器状态管理理念高度统一，为跨端业务逻辑一致性提供基础；
TypeScript强类型约束：为Tooltip组件Props添加完整的类型定义，明确必选参数、可选参数、参数类型（含方向枚举类型）、子元素类型，规避跨端开发中的类型错误，提升代码的可维护性与团队协作效率；
容器化组件设计：采用子元素插槽（children） 设计，让Tooltip组件可包裹任意触发元素（图标、按钮、文本、表单控件），实现组件与触发元素的完全解耦，符合React组件化开发规范，同时与鸿蒙ArkUI的@BuilderParam/子组件插槽设计思路一致，便于跨端复用与场景拓展；
轻量资源管理：以键值对形式封装ICONS全局图标库，选用系统原生支持的Emoji作为视觉元素，避免第三方图标库在鸿蒙平台的桥接兼容问题，减少项目依赖体积，提升多端编译与启动效率；
原生定位与层叠：基于React Native原生的position定位属性与zIndex层叠属性实现浮层展示，无第三方浮层库依赖，保证跨端布局的精准性与渲染性能。

本实现的技术选型既满足了Tooltip组件多场景、多方向的展示需求，又保证了组件的轻量性与通用性，可直接复用至表单提示、操作指引、功能说明、状态解释等各类跨端应用场景，是React Native鸿蒙跨端开发中轻量浮层组件封装的典型实践。

二、容器化组件封装

Tooltip组件采用容器化+子元素插槽的核心设计，将浮层逻辑与触发元素完全解耦，同时通过Props开放方向定制、提示文本配置入口，遵循单一职责原则——仅负责浮层的显隐、定位、渲染，触发元素由外部传入，这种设计让组件具备极强的跨场景适配能力，其封装思路充分体现了React Native跨端开发的组件化与通用性理念，核心技术实现要点如下：

1. TypeScript强类型

Tooltip组件通过React.FC<{ text: string, position?: 'top' | 'bottom' | 'left' | 'right', children: React.ReactNode }>为Props添加了精细化、强类型的约束，核心设计亮点在于：

必选参数精准约束：text（提示文本，字符串类型）为必选，保证组件基础功能可用；children（触发元素，React.ReactNode类型）为必选，明确组件为容器化设计，可包裹任意React元素，与鸿蒙ArkUI的ReactNode类型完全兼容；
方向枚举类型约束：将position参数定义为联合枚举类型'top' | 'bottom' | 'left' | 'right'，限制可选值为固定的四个方向，避免传入无效方向导致的定位异常，同时为参数设置默认值position = 'top'，兼顾使用便捷性与通用性；
跨端类型兼容：所有类型定义均基于TypeScript标准与React Native内置类型，在鸿蒙平台中，React Native for HarmonyOS会将这些类型桥接为鸿蒙ArkUI的对应类型（如React.ReactNode对应ArkUI的Component），保证跨端开发的类型一致性。

这种强类型约束不仅能在开发阶段通过TS编译器检测出参数类型、值的错误，还能为跨端团队协作提供清晰的接口文档，无需额外注释即可明确组件的使用方式，大幅提升开发效率。

2. 容器化插槽设计

Tooltip组件将外部传入的children直接渲染在内部容器中，作为浮层的触发元素，核心代码为{children}，这种子元素插槽设计实现了三大跨端工程化价值：

跨元素适配：可包裹任意触发元素，无论是图标按钮、文本按钮、表单控件、自定义组件，均能无缝结合，无需为不同触发元素封装不同的Tooltip变体，例如表单场景的小问号图标、基础场景的圆形图标按钮、长文本场景的矩形按钮，均可直接作为子元素传入；
跨场景复用：可直接复用至表单提示、功能操作、状态说明、页面指引等任意需要轻量提示的跨端场景，仅需传递不同的text与children，即可实现不同的使用效果，无需修改组件核心逻辑；
跨平台定制：当需要针对鸿蒙平台定制触发元素的样式时，仅需在外部修改传入的children样式，无需修改Tooltip组件内部代码，保证组件的内聚性与可维护性。

在鸿蒙ArkUI开发中，这种设计思路与@BuilderParam装饰器、子组件插槽的实现逻辑高度一致，均是通过将可变元素外部化，实现组件的通用化，这一设计思想的统一，让跨端开发的组件复用成本大幅降低。

3. 触发逻辑

Tooltip组件基于最外层的TouchableOpacity实现触发逻辑，将onPress事件绑定为浮层显隐状态的切换setVisible(!visible)，这种设计让任意触发元素都具备统一的点击触发能力，核心优势在于：

触发逻辑内聚：将浮层的显隐触发逻辑封装在组件内部，外部无需关心状态管理，仅需传入触发元素即可，降低组件的使用成本；
原生交互体验：TouchableOpacity提供的原生触摸反馈（透明渐变），在鸿蒙平台中会被React Native for HarmonyOS桥接为鸿蒙的原生点击反馈，保证鸿蒙、Android、iOS多端的交互体验一致性；
事件透传安全：最外层的TouchableOpacity包裹不会影响内部触发元素的事件（若内部元素有独立事件，可通过事件冒泡/捕获实现），保证组件的可拓展性。

这种点击切换的触发逻辑，是移动端轻量提示组件的通用交互规范，无平台专属特性，在多端均可实现一致的用户体验，后续若需拓展长按触发、悬停触发（鸿蒙平板/电脑端），仅需新增Props配置触发方式即可，无需修改核心结构。

Tooltip组件的核心技术难点与亮点，在于实现浮层相对于触发元素的四方向精准定位，本实现通过动态样式计算函数getPositionStyle结合React Native原生的position定位属性，实现了无第三方依赖的多方向定位，所有布局属性均为通用属性，可无缝适配鸿蒙平台，核心实现要点如下：

1. 定位基础

为tooltipContainer设置position: 'relative'，为浮层tooltip设置position: 'absolute'，这是实现元素相对定位的通用CSS/React Native布局组合，也是鸿蒙ArkUI支持的核心布局属性。通过该组合，浮层的定位基准点被设置为触发元素的容器tooltipContainer，而非整个页面，保证了浮层始终相对于触发元素展示，这一布局逻辑在鸿蒙、Android、iOS多端完全一致，无兼容问题。

同时，为浮层设置zIndex: 1000，保证Tooltip浮层始终显示在其他页面元素的上方，避免被遮挡。zIndex作为层叠顺序的通用属性，在鸿蒙平台中会被React Native for HarmonyOS桥接为ArkUI的zIndex，保证跨端的层叠展示效果一致。

2. 动态样式计算

定义getPositionStyle函数，根据position参数的不同，返回对应的定位样式对象，核心设计思路是基于触发元素容器的中心/边缘，结合偏移量实现居中与间距控制，以四个方向的核心实现为例：

top（上方）：设置bottom: '100%'（浮层底部对齐容器顶部）、left: '50%'（浮层左侧对齐容器水平中心），再通过transform: [{ translateX: -50 }, { translateY: 5 }]实现浮层水平居中（translateX: -50）与与容器的微小间距（translateY: 5）；
bottom（下方）：设置top: '100%'（浮层顶部对齐容器底部）、left: '50%'，通过transform实现水平居中与间距；
left（左侧）：设置right: '100%'（浮层右侧对齐容器左侧）、top: '50%'（浮层顶部对齐容器垂直中心），通过transform实现垂直居中与间距；
right（右侧）：设置left: '100%'（浮层左侧对齐容器右侧）、top: '50%'，通过transform实现垂直居中与间距。

所有样式值均采用百分比与固定像素结合的方式，百分比保证定位的相对性，固定像素保证间距的一致性，这种实现方式无任何平台专属API，完全基于React Native的通用样式属性，在鸿蒙平台中可被完整桥接与渲染。

四、浮层箭头：伪元素效果

Tooltip浮层的箭头是提升视觉体验的核心元素，用于明确浮层与触发元素的关联关系，由于React Native不支持CSS伪元素（如:after/:before），本实现通过独立View组件模拟箭头效果，结合动态样式实现箭头与浮层方向的联动，所有实现均基于原生组件与样式，可无缝适配鸿蒙平台，核心实现要点如下：

1. 箭头核心实现

通过独立的tooltipArrow组件实现箭头效果，核心样式为width: 12、height: 12、backgroundColor: '#333'（与浮层背景色一致）、transform: [{ rotate: '45deg' }]，将一个正方形View旋转45°，形成箭头的核心形状。这种实现方式是React Native中模拟伪元素效果的通用方案，无第三方依赖，所有样式属性均为通用属性，在鸿蒙平台中，transform: rotate会被桥接为ArkUI的rotate变换，旋转效果完全一致。

2. 箭头定位

通过style={[styles.tooltipArrow, { [position]: -6 }]}实现箭头与浮层方向的动态联动，核心设计思路是根据浮层方向，将箭头定位在浮层的对应边缘，并通过负边距实现箭头与浮层的无缝衔接：

当浮层在top方向时，箭头的bottom: -6，箭头底部超出浮层6px（箭头边长的一半），形成指向下方触发元素的效果；
当浮层在bottom方向时，箭头的top: -6，箭头顶部超出浮层6px，形成指向上方触发元素的效果；
当浮层在left方向时，箭头的right: -6，箭头右侧超出浮层6px，形成指向右侧触发元素的效果；
当浮层在right方向时，箭头的left: -6，箭头左侧超出浮层6px，形成指向左侧触发元素的效果。

通过动态属性名{ [position]: -6 }，实现了箭头样式与浮层方向的自动关联，无需为每个方向编写单独的样式，大幅减少了代码冗余。这种动态样式属性的实现方式，基于JavaScript的对象属性特性，在鸿蒙平台的JS引擎中可正常执行，无跨端兼容问题。

真实演示案例代码：




// app.tsx
import React, { useState } from 'react';
import { SafeAreaView, View, Text, StyleSheet, TouchableOpacity, ScrollView, Dimensions } from 'react-native';

// 图标库
const ICONS = {
  info: 'ℹ️',
  question: '❓',
  warning: '⚠️',
  help: '❓',
  tips: '💡',
  notice: '📢',
  alert: '🚨',
  success: '✅',
  error: '❌',
};

const { width } = Dimensions.get('window');

const Tooltip: React.FC<{ 
  text: string, 
  position?: 'top' | 'bottom' | 'left' | 'right',
  children: React.ReactNode
}> = ({ text, position = 'top', children }) => {
  const [visible, setVisible] = useState(false);

  const getPositionStyle = () => {
    switch(position) {
      case 'top':
        return { bottom: '100%', left: '50%', transform: [{ translateX: -50 }, { translateY: 5 }] };
      case 'bottom':
        return { top: '100%', left: '50%', transform: [{ translateX: -50 }, { translateY: -5 }] };
      case 'left':
        return { right: '100%', top: '50%', transform: [{ translateY: -50 }, { translateX: 5 }] };
      case 'right':
        return { left: '100%', top: '50%', transform: [{ translateY: -50 }, { translateX: -5 }] };
      default:
        return { bottom: '100%', left: '50%', transform: [{ translateX: -50 }, { translateY: 5 }] };
    }
  };

  return (
    <TouchableOpacity 
      style={styles.tooltipContainer}
      onPress={() => setVisible(!visible)}
    >
      {children}
      {visible && (
        <View style={[styles.tooltip, getPositionStyle()]}>
          <Text style={styles.tooltipText}>{text}</Text>
          <View style={[styles.tooltipArrow, { [position]: -6 }]} />
        </View>
      )}
    </TouchableOpacity>
  );
};

const TooltipDemo: React.FC = () => {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>Tooltip 提示</Text>
        <Text style={styles.subtitle}>点击图标查看提示信息</Text>
      </View>

      <ScrollView contentContainerStyle={styles.content}>
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>基本提示</Text>
          <View style={styles.row}>
            <Tooltip text="这是一个信息提示">
              <TouchableOpacity style={styles.iconButton}>
                <Text style={styles.icon}>{ICONS.info}</Text>
              </TouchableOpacity>
            </Tooltip>
            
            <Tooltip text="这是帮助信息">
              <TouchableOpacity style={styles.iconButton}>
                <Text style={styles.icon}>{ICONS.help}</Text>
              </TouchableOpacity>
            </Tooltip>
            
            <Tooltip text="这是警告信息">
              <TouchableOpacity style={styles.iconButton}>
                <Text style={styles.icon}>{ICONS.warning}</Text>
              </TouchableOpacity>
            </Tooltip>
          </View>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>不同方向提示</Text>
          <View style={styles.directionRow}>
            <Tooltip text="上方提示" position="top">
              <TouchableOpacity style={styles.iconButton}>
                <Text style={styles.icon}>{ICONS.tips}</Text>
              </TouchableOpacity>
            </Tooltip>
            
            <Tooltip text="下方提示" position="bottom">
              <TouchableOpacity style={styles.iconButton}>
                <Text style={styles.icon}>{ICONS.notice}</Text>
              </TouchableOpacity>
            </Tooltip>
            
            <Tooltip text="左侧提示" position="left">
              <TouchableOpacity style={styles.iconButton}>
                <Text style={styles.icon}>{ICONS.question}</Text>
              </TouchableOpacity>
            </Tooltip>
            
            <Tooltip text="右侧提示" position="right">
              <TouchableOpacity style={styles.iconButton}>
                <Text style={styles.icon}>{ICONS.alert}</Text>
              </TouchableOpacity>
            </Tooltip>
          </View>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>状态提示</Text>
          <View style={styles.row}>
            <Tooltip text="操作成功">
              <TouchableOpacity style={[styles.iconButton, styles.successButton]}>
                <Text style={styles.icon}>{ICONS.success}</Text>
              </TouchableOpacity>
            </Tooltip>
            
            <Tooltip text="出现错误">
              <TouchableOpacity style={[styles.iconButton, styles.errorButton]}>
                <Text style={styles.icon}>{ICONS.error}</Text>
              </TouchableOpacity>
            </Tooltip>
            
            <Tooltip text="操作成功">
              <TouchableOpacity style={[styles.iconButton, styles.successButton]}>
                <Text style={styles.iconText}>成功</Text>
              </TouchableOpacity>
            </Tooltip>
          </View>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>长文本提示</Text>
          <Tooltip text="这是一个比较长的提示信息，用于展示当提示内容较长时的效果。您可以根据需要调整样式的最大宽度。">
            <TouchableOpacity style={styles.longTextButton}>
              <Text style={styles.longText}>长文本提示示例</Text>
            </TouchableOpacity>
          </Tooltip>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>实际应用场景</Text>
          <View style={styles.exampleContainer}>
            <View style={styles.formRow}>
              <Text style={styles.label}>用户名</Text>
              <Tooltip text="请输入您的用户名，长度为3-20个字符">
                <TouchableOpacity style={styles.infoIcon}>
                  <Text style={styles.icon}>{ICONS.question}</Text>
                </TouchableOpacity>
              </Tooltip>
            </View>
            
            <View style={styles.formRow}>
              <Text style={styles.label}>密码</Text>
              <Tooltip text="密码至少包含8个字符，包括数字和字母">
                <TouchableOpacity style={styles.infoIcon}>
                  <Text style={styles.icon}>{ICONS.question}</Text>
                </TouchableOpacity>
              </Tooltip>
            </View>
            
            <View style={styles.formRow}>
              <Text style={styles.label}>邮箱</Text>
              <Tooltip text="请输入有效的邮箱地址">
                <TouchableOpacity style={styles.infoIcon}>
                  <Text style={styles.icon}>{ICONS.question}</Text>
                </TouchableOpacity>
              </Tooltip>
            </View>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8f9fa',
  },
  header: {
    paddingTop: 40,
    paddingBottom: 20,
    paddingHorizontal: 20,
    backgroundColor: '#ffffff',
    borderBottomWidth: 1,
    borderBottomColor: '#e9ecef',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
    textAlign: 'center',
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    textAlign: 'center',
    marginTop: 8,
  },
  content: {
    padding: 16,
  },
  section: {
    marginBottom: 24,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 12,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  directionRow: {
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  tooltipContainer: {
    position: 'relative',
  },
  tooltip: {
    position: 'absolute',
    backgroundColor: '#333',
    paddingVertical: 8,
    paddingHorizontal: 12,
    borderRadius: 6,
    zIndex: 1000,
    maxWidth: 200,
    minWidth: 100,
  },
  tooltipText: {
    color: '#fff',
    fontSize: 12,
    textAlign: 'center',
  },
  tooltipArrow: {
    position: 'absolute',
    width: 12,
    height: 12,
    backgroundColor: '#333',
    transform: [{ rotate: '45deg' }],
  },
  iconButton: {
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: '#e2e8f0',
    justifyContent: 'center',
    alignItems: 'center',
    marginHorizontal: 8,
  },
  successButton: {
    backgroundColor: '#10B981',
  },
  errorButton: {
    backgroundColor: '#EF4444',
  },
  icon: {
    fontSize: 20,
  },
  iconText: {
    fontSize: 12,
    color: '#fff',
  },
  longTextButton: {
    backgroundColor: '#e2e8f0',
    paddingVertical: 10,
    paddingHorizontal: 16,
    borderRadius: 8,
    alignSelf: 'flex-start',
  },
  longText: {
    fontSize: 14,
    color: '#475569',
  },
  exampleContainer: {
    backgroundColor: '#ffffff',
    borderRadius: 12,
    padding: 16,
    elevation: 3,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  formRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 16,
  },
  label: {
    flex: 1,
    fontSize: 16,
    color: '#333',
  },
  infoIcon: {
    width: 24,
    height: 24,
    borderRadius: 12,
    backgroundColor: '#cbd5e1',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default TooltipDemo;

请添加图片描述

打包

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

在这里插入图片描述

打包之后再将打包后的鸿蒙OpenHarmony文件拷贝到鸿蒙的DevEco-Studio工程目录去：

在这里插入图片描述

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

请添加图片描述
Tooltip组件采用模块化设计，通过React.FC封装支持多方向定位的文字提示功能。核心特性包括：1) 强类型约束的Props接口，支持top/bottom/left/right四种定位；2) 容器化设计通过children属性适配各类触发元素；3) 基于useState的状态管理实现显隐控制；4) 动态定位算法通过getPositionStyle函数实现精准偏移；5) 箭头指示器增强视觉关联性。该组件无第三方依赖，采用原生API实现，确保跨平台兼容性，可广泛应用于表单提示、操作指引等场景。

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。

HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

React Native鸿蒙版：memo组件渲染优化

本文深入探讨React.memo在OpenHarmony 6.0.0平台上的性能优化实践。文章从组件渲染机制入手，解析React.memo的工作原理及其在鸿蒙环境下的特殊适配要点。通过架构图展示React Native与HarmonyOS渲染层的交互流程，结合性能对比数据说明优化效果。所有技术方案基于React Native 0.72.5和TypeScript 4.8.4实现，在AtomGitDe