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

Question

我想手动关闭工具提示，但 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 };
  });
};

Answer 1

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