Changer l'icône en-tête de la réaction-navigation

Question

J'ai un headerRight qui est une icône étoile, et quand l'utilisateur clique, il devrait devenir une autre icône étoile (remplie). N'importe quelle direction pour faire ce re-rendu sur la navigation? Toute aide serait appréciée. J'utilise redux pour gérer les états. Merci

Answer 1

utilisation Etat

state = { 
    isClick : false, 
} 

et ne conditionnelle rendent

{ 
    isClick ? <IconFilled/> : <Icon> 
} 

et gérer l'état à l'aide setState dans votre action icône "onPress"

Answer 2

Si c'est un changement d'état éphémère, et En exclusivité pour votre composant Nav, vous devez stocker l'état du clic de l'utilisateur dans this.state, comme mentionné par @KimHau.

Mais vous stockez le résultat du clic de l'utilisateur dans le magasin Redux, ce qui signifie qu'il est probablement destiné à persister dans votre application.

légèrement modifié:

render() { 

    return (

     // ... your other jsx code 
     { this.props.hasUserClicked ? < IconFilled /> : < Icon /> } 

    ) 

} 

Bien qu'il puisse être plus commode de modifier le < Icône /> composant à accepter un accessoire, il peut gérer son propre état.

< Icon userClicked={ this.props.hasUserClicked }/> 

Answer 3

RÉSOLU. J'ai créé un composant pour l'icône et j'ai géré le clic à l'intérieur de ce composant car je n'ai pas accès à l'icône depuis les icônes matérielles-icônes-vecteur.

Merci les gars, vous m'avez vraiment aidé.