Как отключить всплывающую подсказку 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 };
  });
};

tooltip react-native-elements react-native-component
person Hade Heinrich Camacho    schedule 06.02.2019    source источник

Ответы (7)


arrow_upward
1
arrow_downward

я новичок в React-Native и пытался использовать всплывающую подсказку, и я обнаружил, что всякий раз, когда вы щелкаете внутри всплывающего компонента, он переходит к любой функции onpress, которую вы написали для этого конкретного компонента, и всплывающая подсказка не закрывается, он также остается смонтированным, когда вы переходите на другие страницы. Одно из решений — использовать react-native-popup-menu. Это лучшее, что мы можем использовать на данный момент в качестве всплывающей подсказки https://www.npmjs.com/package/react-native-popup-menu

person Akash Singh    schedule 14.06.2019

arrow_upward
0
arrow_downward

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

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

<Tooltip 
      ref={ref => (this.tooltip = ref)}
      popover={
        <ComponentTest
          toggle={this.tooltip} 
        >
    >
person ValdaXD    schedule 06.02.2019
comment
Оба не сработали. Выдает ошибку { undefined не является объектом (оценка '_this.props.toggle.toggleTooltip') } - person Hade Heinrich Camacho; 07.02.2019
comment
ммм, он может быть вложенным, в строке 239 он имеет export default withTheme(Tooltip, 'Tooltip'); , withTheme может действовать как родительский класс, а функция находится на один уровень ниже. Вам нужно попробовать сделать console.log(Object.keys(this.tooltip)). И проверьте один за другим ключи, чтобы увидеть, какой из них имеет класс всплывающей подсказки. - person ValdaXD; 07.02.2019
comment
Ошибка {Запрошены ключи значения, которое не является объектом.} - person Hade Heinrich Camacho; 09.02.2019
comment
ммм интересно. я не думаю, что console.log(JSON.stringify(this.tooltip)) сработает... выполните console.log(this.tooltip) .. или, может быть, задайте вопрос в react-native-elements о том, как откройте всплывающую подсказку программно. Возможно вам ответит создатель всплывающей подсказки - person ValdaXD; 09.02.2019
comment
Console.log(this.tooltip) выдает только undefined. Я попробую спросить их тогда. спасибо за время - person Hade Heinrich Camacho; 12.02.2019
comment
он не должен иметь undefined.. это означает, что у вас нет ссылки на всплывающую подсказку. Это либо плохая реализация ref , либо, может быть... вы используете его внутри ComponentTest, в котором не определен this.tooltip... используйте его в том же классе, где у вас есть всплывающая подсказка, а не в дочернем - person ValdaXD; 12.02.2019

arrow_upward
0
arrow_downward

В строке 191 подсказки. js:

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

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

person Community    schedule 28.05.2019

arrow_upward
0
arrow_downward

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

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

person hardworking    schedule 25.11.2019

arrow_upward
0
arrow_downward

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

person Ariel Salem    schedule 24.07.2020

arrow_upward
0
arrow_downward

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

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

arrow_upward
0
arrow_downward

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

Документы

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

const tooltipRef = useRef(null);

...

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

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

useEffect(() => {
   tooltipRef.current.toggleTooltip();
}, []);
person Supun Athukorala    schedule 16.01.2021