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

0

ばかげた解決策かもしれませんが、使ってみましたthis.props.toggleTooltip()か？

OH 、そして ref はもはや文字列ではなく、関数です

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