模板版本：v0.2.2

react-native-walkthrough-tooltip

请到三方库的 Releases 发布地址查看配套的版本信息：

三方库版本	支持RN版本
1.6.0	0.72/0.77

安装与使用

进入到工程目录并输入以下命令：

npm

npm install react-native-walkthrough-tooltip@1.6.0

yarn

yarn add react-native-walkthrough-tooltip@1.6.0

下面的代码展示了这个库的基本使用场景：

import React, { useState } from "react";
import { View, Text, } from "react-native";
import Tooltip from 'react-native-walkthrough-tooltip';

export const TestTooltip = ({ text, style }) => {
  const [toolTipVisible, setToolTipVisible] = useState(false);

  return (
   <Tooltip
   isVisible={toolTipVisible}
   content={<Text>Check this out!</Text>}
   placement="top"
   onClose={() => setToolTipVisible(false)}
    >
  <TouchableHighlight onPress={() => setToolTipVisible(!toolTipVisible)}>
    <Text>Press me</Text>
  </TouchableHighlight>
</Tooltip>
};

约束与限制

兼容性

本文档内容基于以下版本验证通过:

1. RNOH: 0.72.5; SDK: HarmonyOS-NEXT-DB1 5.0.0.25; IDE: DevEco Studio 5.0.3.403; ROM: 3.0.0.25;
2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;

属性

[!TIP]"Platform"列表示该属性在原三方库上支持的平台。

[!TIP]"HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果

Name	Description	Type	Required	Platform	HarmonyOS Support
accessible	Set this to false if you do not want the root touchable element to be accessible. See docs on accessible here	bool	No	All	No
allowChildInteraction	By default, the user can touch and interact with the child element. When this prop is false, the user cannot interact with the child element while the tooltip is visible.	bool	No	All	Yes
arrowSize	The dimensions of the arrow on the bubble pointing to the highlighted element	Size	No	All	Yes
backgroundColor	Color of the fullscreen background beneath the tooltip. Overrides the backgroundStyle prop	string	No	All	Yes
childContentSpacing	The distance between the tooltip-rendered child and the arrow pointing to it	number	No	All	Yes
closeOnChildInteraction	When child interaction is allowed, this prop determines if onClose should be called when the user interacts with the child element. Default is true (usually means the tooltip will dismiss once the user touches the element highlighted)	bool	No	All	Yes
closeOnContentInteraction	this prop determines if onClose should be called when the user interacts with the content element. Default is true (usually means the tooltip will dismiss once the user touches the content element)	bool	No	All	Yes
content	This is the view displayed in the tooltip popover bubble	function/Element	Yes	All	Yes
displayInsets	The number of pixels to inset the tooltip on the screen (think of it like padding). The tooltip bubble should never render outside of these insets, so you may need to adjust your content accordingly	object	No	All	Yes
disableShadow	When true, tooltips will not appear elevated. Disabling shadows will remove the warning: RCTView has a shadow set but cannot calculate shadow efficiently on IOS devices.	bool	No	All	Yes
isVisible	When true, tooltip is displayed	bool	Yes	All	Yes
onClose	Callback fired when the user taps the tooltip background overlay	function	Yes	All	Yes
placement	Where to position the tooltip - options: top, bottom, left, right, center. Default is top for tooltips rendered with children Default is center for tooltips rendered without children.NOTE: center is only available with a childless placement, and the content will be centered within the bounds defined by the displayInsets.	string	Yes	All	Yes
showChildInTooltip	Set this to false if you do NOT want to display the child alongside the tooltip when the tooltip is visible	bool	No	All	Yes
supportedOrientations	This prop allows you to control the supported orientations the tooltip modal can be displayed. It correlates directly with the prop for React Native's Modal component (has no effect if useReactNativeModal is false)	bool	No	iOS	No
topAdjustment	Value which provides additional vertical offest for the child element displayed in a tooltip. Commonly set to: Platform.OS === 'android' ? -StatusBar.currentHeight : 0 due to an issue with React Native's measure function on Android	number	No	All	Yes
horizontalAdjustment	Value which provides additional horizontal offest for the child element displayed in a tooltip. This is useful for adjusting the horizontal positioning of a highlighted child element if needed	number	No	All	Yes
useInteractionManager	Set this to true if you want the tooltip to wait to become visible until the callback for InteractionManager.runAfterInteractions is executed. Can be useful if you need to wait for navigation transitions to complete, etc. See docs on InteractionManager here	bool	No	All	Yes
useReactNativeModal	By default, this library uses a component from React Native. If you need to disable this, and simply render an absolutely positioned full-screen view, set useReactNativeModal={false}. This is especially useful if you desire to render a Tooltip while you have a different Modal rendered.	bool	No	All	Yes

遗留问题

• supportedOrientations在HarmonyOS不支持
• accessible在HarmonyOS不支持

其他

开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。