如何在React Native上更改图标onPress [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>); 
    } 
} 

检查组件容器的设计模式并提醒组件应该尽可能哑。