comment effectuer un rendu conditionnel dans l'en-tête du navigateur de pile native de réaction?

Question

J'essaye de rendre le headerRight conditionnellement basé sur un param de navigation. J'essaye actuellement ceci dans les options de navigation statiques. Voici mon code, mais rien est rendu à l'écran

static navigationOptions = ({navigation}) => ({ 
headerRight :() => { 
    if (navigation.state.params.user.following) { 
    return (
     <TouchableOpacity 
      onPress={() => this.followUser()}> 
      <Icon2 name="ios-person-add-outline" size={35} /> 
     </TouchableOpacity> 
    )} else { 
    return (
      <TouchableOpacity 
      onPress={() => this.unfollowUser()}> 
      <Icon name="user-times" size={20} /> 
      </TouchableOpacity> 
     )} 
    }, 
}) 

Cela peut-il être fait ou ai-je besoin d'utiliser un en-tête personnalisé ici?

Toute aide serait grandement appréciée! Merci!

Solution:

supprimer la fonction anonyme et mettre en œuvre la syntaxe conditionnelle recommandée par soutot

static navigationOptions = ({navigation}) => ({ 
    headerRight : navigation.state.params.otherUser.following ? 
    (<TouchableOpacity 
     onPress={() => this.followUser()}> 
     <Icon2 name="ios-person-add-outline" size={35} /> 
     </TouchableOpacity>) 
    : 
    (<TouchableOpacity 
     onPress={() => this.unfollowUser()}> 
     <Icon name="user-times" size={20} /> 
     </TouchableOpacity>) 
    }) 

Answer 1

Vous utilisez une virgule (,) après votre déclaration else. vous pouvez aussi essayer quelque chose comme ça

return(
navigation.state.params.user.following ? 
<TouchableOpacity 
    onPress={() => this.followUser()}> 
    <Icon2 name="ios-person-add-outline" size={35} /> 
</TouchableOpacity> 
: 
<TouchableOpacity 
    onPress={() => this.unfollowUser()}> 
    <Icon name="user-times" size={20} /> 
</TouchableOpacity> 
); 

Pour plus d'informations sur le rendu conditionnel, consultez les documents suivants: https://facebook.github.io/react/docs/conditional-rendering.html

https://facebook.github.io/react/docs/conditional-rendering.html#inline-if-else-with-conditional-operator

Hope it helps