4

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

7 回答 7

1

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

于 2019-06-14T13:14:57.597 回答
0

只需display:'none'在您触摸弹出框后将其样式设置为。

也许试试这种方式：

state = { theDisplay: 'flex' };

...

componentDidUpdate(prevProps: any) {
    if (!prevProps.isFocused && this.props.isFocused) {
      this.setState({ theDisplay: 'flex' });
    }
}

...

<Popover.Item
    value={'response'}
    onSelect={() => {
        this.setState({ theDisplay: 'none' });
        navigate('NoticeResponse', { id: item.id });
    }}>
    <Text style={styles.toolsItem}>已读信息</Text>
</Popover.Item>

这是我自己的处理方式。我希望它会帮助你。

于 2019-11-25T10:34:20.390 回答
0

在Tooltip.js的第 191 行：

 <TouchableOpacity onPress={this.toggleTooltip}>
     {this.renderContent(true)}
 </TouchableOpacity>

并且在第 137 行的 renderContent:112 的定义中，它被渲染为您的弹出框：因此，您在弹出框中触摸的任何位置都会使其消失。我不知道如何禁用此行为，但我仍然想知道是否以及如何至少可以从 Tooltip 的子元素控制弹出框的可见性。

于 2019-05-28T15:08:49.080 回答
0

在没有任何第三方库的情况下，iOS 和 android 的简单工具提示可以实现如下：

onPress={() =>
  Alert.alert("My Title", "My Msg", [], {
    cancelable: true
  })
}
于 2020-09-18T05:00:52.093 回答
0

React native elements 文档显示我们可以手动关闭工具提示。

文档

使用 React 提供的 ref 属性在组件中存储对 Tooltip 的引用

const tooltipRef = useRef(null);

...

<Tooltip
    ref={tooltipRef}
  ...
/>

然后您可以从任何地方手动触发工具提示，例如在屏幕加载时：

useEffect(() => {
   tooltipRef.current.toggleTooltip();
}, []);
于 2021-01-16T18:57:50.627 回答
0

免责声明我使用了这个ref例子来让我的代码工作，但它是这样的：

const tooltipRef = useRef(null);

const foo = (event, index) => {
  event.stopPropagation();
  tooltipRef.current.toggleTooltip()
}
...
<Tooltip
  height={200}
  ref={tooltipRef}
  popover={<TouchableOpacity onPress={(event) => foo(event, index)}
/>

我最初试图通过简单地在示例tooltipRef.current.toggleTooltip()中使用like来实现这一点，但它从未最终工作，因为事件正在传播并继续自行切换它（有效地切换它两次）。

于 2020-07-24T19:38:54.207 回答
0

这可能是一个愚蠢的解决方案，但是您尝试过使用this.props.toggleTooltip()吗？

哦，并且 ref 不再是字符串，它是一个函数

<Tooltip 
      ref={ref => (this.tooltip = ref)}
      popover={
        <ComponentTest
          toggle={this.tooltip} 
        >
    >
于 2019-02-06T19:47:56.517 回答