如何在React Native [ListView]中更改onPress上的图标

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>

它不会改变图标。

Answer 1

首先，我可以通过您的代码猜测您在持有列表视图的组件中解决了这个问题。这是错误的，因为你不能为每个可爱的人定义一个状态＆＃34;组件，主要是因为你事先不知道它们有多少。相反，您应该尝试将此组件设为虚拟，并在道具被爱或不受欢迎时接收。

然后，您应该在组件中放置一个回调来执行父组件的代码。像这样：

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

检查组件 - 容器设计模式，并提醒组件应尽可能虚拟。