点击TouchableOpacity修改tintColor后FlatList项未刷新的解决方法

你的问题核心在于没有用React状态管理数据，且修改数据的方式不符合React的不可变更新原则，导致组件无法感知数据变化，FlatList自然不会刷新。

问题分析 #

1. 你用let posts = [some_data]声明的是普通变量，不是React状态，组件不会监听普通变量的变更，所以修改后不会触发重新渲染。
2. 直接修改数组元素的属性（posts[item.id].color = ...）属于可变操作，即使是状态，这种修改方式不会改变数组的引用，React的浅比较机制会认为数据没有变化，不会触发更新。

解决方案 #

1. 用useState管理posts数据

把普通变量改成React状态，让组件能监听数据变化：

import { useState } from 'react';

const SomeScreen = ({navigation}) => {
    const [posts, setPosts] = useState(some_data); // 用useState包裹初始数据
    // ...
}

2. 用不可变方式更新状态

修改setColor函数，通过创建新数组和新对象的方式更新数据，确保状态引用发生变化：

function setColor(item){
    setPosts(prevPosts => {
        // 遍历原数组，找到目标项后返回新对象
        return prevPosts.map(post => {
            if (post.id === item.id) {
                // 复制原对象并修改属性，保持不可变性
                return {
                    ...post,
                    color: post.color === 'red' ? '#8B8D8E' : 'red',
                    bgColor: post.color === 'red' ? '#232323' : '#3E2526'
                };
            }
            // 非目标项直接返回原对象
            return post;
        });
    });
}

3. 验证FlatList的配置

确保FlatList的data指向状态posts，extraData可以保留（此时data是状态已足够，但加上能确保所有关联数据变化时触发刷新）：

<FlatList
    data={posts}
    keyExtractor={item => item.id}
    extraData={posts}
    refreshControl={
        <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
        />
    }
    renderItem={({item}) => {
        // 注意：你代码里的tintColor用了item.likeColor，但状态里修改的是item.color，这里要对应一致
        return (
            <TouchableOpacity onPress={() => setColor(item)}>
                <View style={…}>
                    <Image source={…} style={{…, tintColor: item.color}}/>
                </View>
            </TouchableOpacity>
        );
    }}
/>

额外注意 #

你代码里tintColor绑定的是item.likeColor，但修改的是item.color，如果这是笔误，请统一字段名，否则颜色不会生效。

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