React Native列表中点击单个心形按钮变色问题求助

我一眼就看出问题啦——你现在所有的心形按钮都共享同一个buttonColor状态变量，所以不管点哪个按钮，所有按钮都会跟着切换颜色，这肯定不是你想要的效果对吧？

要实现单个按钮独立变色并保存状态，我们需要给每个列表项单独维护它的选中状态，而不是用一个全局的状态来控制所有按钮。下面是具体的修改方案：

1. 调整状态结构 #

把原来单一的buttonColor改成一个对象likedItems，用来记录每个列表项的选中状态（用item的唯一标识作为key，值为布尔值标记是否选中）。初始状态设为空对象：

this.state = {
  likedItems: {}, // 记录每个item的选中状态，key是item的index或唯一id
};

2. 修改点击事件 #

让点击事件接收当前item的标识（比如index），只更新对应item的状态：

onButtonPress = (index) => {
  // 使用函数式setState确保获取最新状态
  this.setState(prevState => ({
    likedItems: {
      ...prevState.likedItems,
      [index]: !prevState.likedItems[index] // 切换选中状态
    }
  }));
};

3. 渲染时绑定对应状态 #

每个心形按钮的颜色根据当前item的选中状态来决定：

<Icon 
  raised 
  name='heart' 
  type='font-awesome' 
  color={this.state.likedItems[i] ? '#ff002b' : '#979797'} 
  onPress={() => this.onButtonPress(i)} 
/>

修改后的完整代码 #

import React, { Component } from 'react'; 
import { StyleSheet, Text, View, Button } from 'react-native'; 
import { ListItem } from 'react-native-elements';
import { Icon } from 'react-native-elements';
import Data from './src/data/sampledata.json'; 

export default class App extends Component { 
  constructor(props) { 
    super(props); 
    this.state = {
      likedItems: {}, // 存储每个item的选中状态
    }; 
  } 

  onButtonPress = (index) => {
    // 使用函数式setState确保获取最新状态
    this.setState(prevState => ({
      likedItems: {
        ...prevState.likedItems,
        [index]: !prevState.likedItems[index]
      }
    }));
  }

  render() { 
    return ( 
      <View style={styles.container}> 
        { Data.map((item, i) => ( 
          <ListItem 
            key={item.index} 
            title={item.dataItem} 
            rightIcon={ 
              <Icon 
                raised 
                name='heart' 
                type='font-awesome' 
                color={this.state.likedItems[i] ? '#ff002b' : '#979797'} 
                onPress={() => this.onButtonPress(i)} 
              /> 
            } 
          /> 
        )) } 
      </View> 
    ); 
  } 
} 

const styles = StyleSheet.create({ 
  container: { 
    flex: 1, 
    backgroundColor: '#F5FCFF', 
  }, 
});

关键说明 #

• 我们用likedItems对象来单独追踪每个列表项的选中状态，这样每个按钮的颜色只和自己的状态绑定，不会互相影响
• 使用函数式setState是因为我们需要基于之前的状态来更新，确保状态更新的准确性
• 如果你的Data里有唯一的id字段，建议用item.id代替i作为likedItems的key，这样更稳定（比如列表顺序变化时不会出错）

这样修改后，点击任意一个心形按钮，就只有这个按钮会切换颜色，而且状态会被保存下来啦！

内容的提问来源于stack exchange，提问作者Gus Nando