React Native FlatList利用项索引/键实现单个心形图标点击变色咨询

你的问题核心在于全局状态被所有列表项共享——原来的like和color是组件级的全局变量，所有联系人项都共用这两个状态值，导致点击任意一个心形，所有图标都会同步变色。要实现单个项独立的变色效果，我们需要给每个联系人维护专属的"喜欢"状态，而非使用全局变量。

具体修改步骤： #

1. 调整组件状态结构

把原来全局的like和color替换成一个数组，专门用来记录所有被标记为"喜欢"的联系人ID：

state = { 
  text: '', 
  contacts: data, 
  likedContactIds: [], // 存储被点击的联系人ID，实现独立状态管理
} 

2. 重写toggleLike函数

现在这个函数需要接收当前联系人的ID，通过判断ID是否在"喜欢列表"中，来决定添加或移除该ID：

toggleLike = (contactId) => {
  this.setState(prevState => ({
    likedContactIds: prevState.likedContactIds.includes(contactId)
      ? prevState.likedContactIds.filter(id => id !== contactId) // 已喜欢则取消
      : [...prevState.likedContactIds, contactId] // 未喜欢则添加
  }));
}

3. 修改列表项的点击事件与图标颜色

在renderContactsItem中，给TouchableWithoutFeedback的onPress传递当前项的ID，同时根据ID是否在likedContactIds数组中来动态设置图标颜色：

renderContactsItem = ({item, index}) => { 
  const isLiked = this.state.likedContactIds.includes(item.id);
  return ( 
    <View style={[styles.itemContainer]}> 
      {/* 头像、姓名等原有代码保持不变 */}
      <Right style={{justifyContent: 'center'}}> 
        <TouchableWithoutFeedback onPress={() => this.toggleLike(item.id)}> 
          <Icon 
            name='heart' 
            type='FontAwesome' 
            size={32} 
            style={{
              color: isLiked ? 'red' : 'white',
              paddingRight: 10 
            }}
          />
        </TouchableWithoutFeedback> 
      </Right> 
    </View> 
  ); 
}

4. 修复Contact页面的语法错误

你的Contact页面存在两处小问题，需要修正：

import React from 'react'; 
import { SafeAreaView } from 'react-native'; // 正确导入SafeAreaView组件
import FlatList from './FlatList'; 

export default function Contact() { 
  // 函数组件必须返回JSX元素
  return (
    <SafeAreaView style={{ flex: 1 }}> 
      <FlatList /> 
    </SafeAreaView>
  )
} 

方案原理 #

我们通过likedContactIds数组记录所有被喜欢的联系人ID，每个列表项仅需检查自身ID是否在该数组中，就能独立控制图标的颜色状态。点击不同项时，只会修改数组中对应的ID，不会影响其他项的状态，完美实现了单个心形图标独立变色的需求。

内容的提问来源于stack exchange，提问作者Utku Demir