Je souhaite fermer manuellement l'info-bulle mais il n'y a aucun document sur le site react-native-elements.
J'ai donc examiné le code de l'infobulle de github et j'ai remarqué qu'il avait une fonction toggleTooltip à basculer. Malheureusement, je n'ai pas pu le faire fonctionner.
Voici l'exemple de code pour l'info-bulle
toggleTooltip = () => {
const { onClose } = this.props;
this.getElementPosition();
this.setState(prevState => {
if (prevState.isVisible && !isIOS) {
onClose && onClose();
}
return { isVisible: !prevState.isVisible };
});
};
L'exemple de code pour le ComponentTest
XXX
Et c'est la fonction de tooltip.js que j'essaye d'utiliser. Le code complet de l'infobulle peut être trouvé ici https://github.com/react-native-training/react-native-elements/blob/master/src/tooltip/Tooltip.js
import { Button } from 'react-native-elements';
toggleOff = () => {
this.props.toggleTooltip;
}
render() {
return (
<Button
title="hide"
type="outline"
onPress={this.toggleOff}
/>
);
}
6 Réponses :
C'est peut-être une solution stupide, mais avez-vous essayé d'utiliser this.props.toggleTooltip () ?
OH, et ref n'est plus une chaîne, c'est une fonction
<Tooltip
ref={ref => (this.tooltip = ref)}
popover={
<ComponentTest
toggle={this.tooltip}
>
>
Les deux n'ont pas fonctionné. Il produit une erreur {undefined n'est pas un objet (évaluant'_this.props.toggle.toggleTooltip ')}
mmm, il peut être imbriqué, à la ligne 239, il a export default withTheme (Tooltip, 'Tooltip'); , withTheme peut agir comme une classe parente et la fonction est un niveau en dessous. Vous devez essayer de faire console.log (Object.keys (this.tooltip)) . Et vérifiez une par une les clés pour voir laquelle a la classe tootltip
Erreur {Clés demandées d'une valeur qui n'est pas un objet.}
mmm intéressant. je ne pense pas que console.log (JSON.stringify (this.tooltip)) fonctionnerait ... faites console.log (this.tooltip) .. ou peut-être, déposez un problème dans react-native-elements sur la façon de ouvrez l'info-bulle par programme. Peut-être que le créateur de l'info-bulle vous répond
Console.log (this.tooltip) produit uniquement undefined. Je vais essayer de leur demander alors. Merci pour le temps
il ne doit pas être indéfini. Cela signifie que vous n'avez pas de référence à l'info-bulle. C'est soit une mauvaise implémentation de ref , soit peut-être ... vous l'utilisez dans ComponentTest qui n'a pas this.tooltip défini ... utilisez-le dans la même classe où vous avez l'info-bulle, pas chez l'enfant
En ligne 191 sur Tooltip.js :
<TouchableOpacity onPress={this.toggleTooltip}>
{this.renderContent(true)}
</TouchableOpacity>
et dans la définition de renderContent: 112 à la ligne 137, il est rendu votre popover: Ainsi, où que vous touchiez dans votre popover, il disparaîtra. Je ne sais pas comment désactiver ce comportement, mais je veux toujours savoir si et comment la visibilité du popover peut être contrôlée à partir de l'élément enfant de l'info-bulle au moins.
Je suis nouveau dans React-Native et j'essayais d'utiliser l'info-bulle, ce que j'ai découvert que chaque fois que vous cliquez à l'intérieur du composant qui apparaît, il accède à la fonction onpress que vous avez écrite sur ce composant particulier et l'info-bulle ne le fait pas ' t ferme , il reste également monté lorsque vous naviguez vers d'autres pages, une solution à cela est d'utiliser react-native-popup-menu.it le meilleur que nous pouvons utiliser pour l'instant comme info-bulle https://www.npmjs.com/package/react-native-popup-menu
Il suffit de définir son style sur display: 'none' après avoir touché votre popover.
Essayez peut-être de cette façon:
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>
Ceci est ma propre façon de gérer cela. J'espère que cela vous aidera.
DISCLAIMER J'ai utilisé l'exemple ref pour faire fonctionner mon code, mais c'est quelque chose comme ça:
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)}
/>
I avait initialement essayé de l'implémenter en utilisant simplement le tooltipRef.current.toggleTooltip () comme dans le exemple mais cela n'a jamais fonctionné car l'événement se propageait et continuait à le basculer seul (en le basculant effectivement deux fois).
Sans aucune bibliothèque tierce, une simple info-bulle pour iOS et Android peut être implémentée comme suit:
onPress={() =>
Alert.alert("My Title", "My Msg", [], {
cancelable: true
})
}