反応するネイティブスタックナビゲータのヘッダー内で条件付きでレンダリングする方法は？

Question

私は、ナビゲーションパラメータに基づいて条件付きでheaderRightをレンダリングしようとしています。私は現在、静的なnavigationOptionsでこれを試しています。ここに私のコードはありますが、何も画面にレンダリングしていません。

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> 
     )} 
    }, 
}) 

ここでカスタムヘッダーを使用する必要がありますか？

ご協力いただければ幸いです。ありがとう！

ソリューション：

匿名関数を削除し、あなたがあなたの '他の' ステートメントの後にカンマ（、）を使用している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

が推奨する条件付きの構文を実装します。また、あなたは、次のドキュメントをチェック、条件付きのレンダリングについての詳細情報については、この

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> 
); 

ような何かを試すことができます。 https://facebook.github.io/react/docs/conditional-rendering.html

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

を、それは予期しないトークンを示すライン