From 786aff3777684967ecfcdd9aa310aec9974494f7 Mon Sep 17 00:00:00 2001 From: 01xkp <1903679953@qq.com> Date: Mon, 22 Jul 2024 17:39:07 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=96=B0=E5=A2=9Ereact-native-walkthro?= =?UTF-8?q?ugh-tooltip=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-walkthrough-tooltip.md | 98 +++++++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100644 zh-cn/react-native-walkthrough-tooltip.md diff --git a/zh-cn/react-native-walkthrough-tooltip.md b/zh-cn/react-native-walkthrough-tooltip.md new file mode 100644 index 00000000..df1914bf --- /dev/null +++ b/zh-cn/react-native-walkthrough-tooltip.md @@ -0,0 +1,98 @@ +> 模板版本：v0.2.2 + +

+

react-native-walkthrough-tooltip

+

+

+ + Supported platforms + + + License + + +

+ + +>[!TIP] [Github 地址](https://github.com/jasongaare/react-native-walkthrough-tooltip) +## 安装与使用 + +进入到工程目录并输入以下命令： + +#### **npm** + +```bash +npm install react-native-walkthrough-tooltip@1.6.0 +``` + +#### **yarn** + +```bash +yarn add react-native-walkthrough-tooltip@1.6.0 +``` +下面的代码展示了这个库的基本使用场景： + +```js +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 ( + Check this out!} + placement="top" + onClose={() => setToolTipVisible(false)} + > + setToolTipVisible(!toolTipVisible)}> + Press me + + +}; +``` +## 约束与限制 + +### 兼容性 + +本文档内容基于以下版本验证通过: + +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; + + +### 属性 +[!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](https://reactnative.dev/docs/accessibility#accessibility-properties) | bool| Yes | All |Yes | +| 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 | Yes | All | Yes | +| arrowSize |The dimensions of the arrow on the bubble pointing to the highlighted element | Size | Yes |All | Yes +| backgroundColor |Color of the fullscreen background beneath the tooltip. Overrides the backgroundStyle prop | string | Yes |All | Yes +| childContentSpacing | The distance between the tooltip-rendered child and the arrow pointing to it | number | Yes |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 |Yes | 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 |Yes | 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 |Yes | 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 |Yes | All | Yes +| 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 |Yes | 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 |Yes | 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](https://reactnative.dev/docs/interactionmanager) | bool |Yes | 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 |Yes | All | Yes +## 遗留问题 + +- [supportedOrientations](https://reactnative.dev/docs/modal#supportedorientations),属性配置后未生效，在iOS、Android平台同样未生效 + +- [closeOnChildInteraction](https://github.com/jasongaare/react-native-walkthrough-tooltip/issues/177),属性配置后未生效，在iOS、Android平台同样未生效 +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/jasongaare/react-native-walkthrough-tooltip/blob/master/LICENSE) ，请自由地享受和参与开源。 + \ No newline at end of file -- Gitee