时间戳

首页 > 解决方案 > 如何从另一个组件中关闭 react-native-elements 工具提示

tooltip - 如何从另一个组件中关闭 react-native-elements 工具提示

问题描述

我想手动关闭工具提示，但 react-native-elements 站点上没有文档。

所以我查看了来自 github 的工具提示代码，并注意到它有一个 toggleTooltip 功能来切换。不幸的是，我无法让它工作。

这是工具提示的示例代码

import { Tooltip } from 'react-native-elements';

render() {
  return (
    <Tooltip 
      ref="tooltip"
      popover={
        <ComponentTest
          toggle={this.refs.tooltip} 
        >
    >
      <Text>Click me</Text>
    </Tooltip>
  );
}

ComponentTest 的示例代码

import { Button } from 'react-native-elements';

toggleOff = () => {
  this.props.toggleTooltip;
}

render() {
  return (
      <Button
        title="hide"
        type="outline"
        onPress={this.toggleOff}
      />
  );
}

这是我正在尝试使用的 tooltip.js 中的功能。工具提示的完整代码可以在这里找到https://github.com/react-native-training/react-native-elements/blob/master/src/tooltip/Tooltip.js

toggleTooltip = () => {
  const { onClose } = this.props;
  this.getElementPosition();
  this.setState(prevState => {
    if (prevState.isVisible && !isIOS) {
      onClose && onClose();
    }

    return { isVisible: !prevState.isVisible };
  });
};

标签： tooltipreact-native-elementsreact-native-component

解决方案

我是 react-native 的新手，正在尝试使用工具提示，我发现每当您在弹出的组件内部单击时，它都会导航到您在该特定组件上编写的任何 onpress 功能，并且工具提示不会关闭， ，当您导航到其他页面时，它也会保持安装状态，一个解决方案是使用 react-native-popup-menu。它是我们现在可以用作工具提示的最佳工具 https://www.npmjs.com/包/react-native-popup-menu

推荐阅读