Как отключить подсказку реагировать на родные элементы из другого компонента

Question

Я хочу вручную закрыть всплывающую подсказку, но на сайте реагировать на нативные элементы нет документов.

Поэтому я просмотрел код всплывающей подсказки из 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, которую вы написали для этого конкретного компонента, и всплывающая подсказка не закрывается,, он также остается смонтированным, когда вы переходите на другие страницы, одним из решений является использование response-native-popup-menu. это лучшее, что мы можем использовать сейчас в качестве всплывающей подсказки https://www.npmjs.com/ пакет / реагировать-родное-всплывающее-меню

Answer 2

Это может быть глупым решением, но вы пытались использовать this.props.toggleTooltip()?

О, а ref больше не строка, это функция

<Tooltip 
      ref={ref => (this.tooltip = ref)}
      popover={
        <ComponentTest
          toggle={this.tooltip} 
        >
    >

Answer 3

Просто установите его стиль на 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>

Это мой собственный способ справиться с этим. Надеюсь, это вам поможет.

Answer 4

Без какой-либо сторонней библиотеки простая всплывающая подсказка для iOS и Android может быть реализована следующим образом:

onPress={() =>
  Alert.alert("My Title", "My Msg", [], {
    cancelable: true
  })
}

Answer 5

В строке 191 из Tooltip.js:

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

и в определении renderContent:112 в строке 137 он отображается как ваш поповер: таким образом, куда бы вы не прикоснулись в вашем поповере, он исчезнет. Я не знаю, как отключить это поведение, но я все еще хочу знать, можно ли и как контролировать видимость всплывающего окна из дочернего элемента всплывающей подсказки, по крайней мере.

Answer 6

Документация по нативным элементам React показывает, что мы можем вручную отключить всплывающую подсказку.

Документы

Сохраните ссылку на всплывающую подсказку в вашем компоненте, используя реквизит ref, предоставленный React.

      const tooltipRef = useRef(null);

...

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

Затем вы можете вручную вызвать всплывающую подсказку из любого места, например, при загрузке экрана:

      useEffect(() => {
   tooltipRef.current.toggleTooltip();
}, []);

Answer 7

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ Я использовал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()как в примере, но он никогда не работал, потому что событие распространялось и продолжало переключать его самостоятельно (эффективно переключая его дважды).