Reactネイティブ[ListView]でアイコンを変更する方法

Question

私はReact Nativeを初めて使うので、これが簡単なのか疑問に思われます。私はListViewのアイコンを切り替えるしようとしています。これについてどうすればいいですか？あなたの助けが大変ありがとうございます。

ここに私が作業しているコードがあります。

this.state = { 
    logo: 'star-o', 
    check: false 
}; 



saveFavourite = (data) => { 
    this.state.check === false ? this.setState({logo:'star', check:true}) : this.setState({logo:'star-o', check:false}) 
} 


<TouchableOpacity onPress={() => this.saveFavourite(data)}> 
    <Icon name={this.state.logo} size={30} /> 
</TouchableOpacity> 

それはアイコンを変更din't。

Answer 1

まず、コードで、リストビューを保持しているコンポーネントでこれを処理していると推測できます。これは主にあなたがどれくらい多くのことをあらかじめ知ることができないために、すべての "愛らしい"コンポーネントに状態を定義することができないため、間違っています。代わりに、このコンポーネントをダミーにして、それが小道具によって愛されているかどうかを受け取るようにしてください。

次に、親コンポーネントのコードを実行するためにコンポーネント内にコールバックを配置する必要があります。

class MyListComponent extends React.Component { 
    state = { 
    items: [ 
     { text: 'Some text', loved: false }, 
     { text: 'Some text2', loved: true }, 
    ], 
    } 

    toggleLoved() => { 
    // your logic here 
    } 

    render() { 
    return(
     <FlatList 
      data={this.state.items} 
      renderItem={(item) => { 
       <MyLoveableComponent 
       loved={item.item.loved} 
       onLoved={() => this.toggleLoved() } 
      }/> 
    ); 
    } 

} 




const MyLoveableComponent = ({ loved, onLoved, logo }) => { 
     return(
     <TouchableOpacity 
      onPress={() => { 
       setFavourite(); 
       onLoved(); 
     }> 
      <Icon name={logo} size={30} /> 
     </TouchableOpacity>); 
    } 
} 

コンポーネントコンテナのデザインパターンを確認し、コンポーネントができるだけダミーであることを忘れないように注意してください。