Reactjs react native中的动画在所有组件中启动，而不是仅在按下的组件中启动

我对React Native和React Native中的动画都是新手。我试图做的是在按下时填充复选框，但我在按下可触摸不透明度时填充所有复选框的方式。 “颜色”值由以下公式定义：

const color=useRef（新的动画.Value（0））.current
我不知道这是不是最好的办法。我搜索了文档，看到了类似的内容

    const {
        clean,
        tasks,
        getTasksList,
        edited,
        toogleEdited,
        deleteList,
    } = useContext(listContext);
    const { taskEdited } = useContext(taskContext);
    const [listName, setListName] = useState("");
    const screenHeight = Math.round(Dimensions.get("window").height);
    const colors = useRef(
        Array.from({ length: tasks.length }).fill(new Animated.Value(0))
    );

    async function getListName() {
        setListName(await AsyncStorage.getItem("listName"));
    }
    async function asyncGetTasks() {
        await getTasksList();
    }
    useEffect(() => {
        getListName();
        asyncGetTasks();
    }, [edited, taskEdited]);
    return (
        <View style={styles.container}>
            <StatusBar hidden />
            <View style={styles.buttonsContainer}>
                <TouchableOpacity
                    onPress={() => {
                        clean();
                        navigation.goBack();
                    }}
                >
                    <MaterialIcons name="arrow-back" size={32} />
                </TouchableOpacity>
                <TouchableOpacity
                    onPress={() => {
                        deleteList();
                        clean();
                        navigation.goBack();
                    }}
                >
                    <MaterialIcons name="delete" size={32} color="#bc0000" />
                </TouchableOpacity>
            </View>
            <View style={styles.titleContent}>
                <Text style={styles.titleText}>{listName}</Text>
            </View>
            <ScrollView style={{ height: screenHeight }}>
                {tasks.length > 0 ? (
                    tasks.map((item, index) => (
                        <TouchableOpacity key={index} style={styles.task}>
                            <View style={{ flexDirection: "row" }}>
                                <TouchableOpacity
                                    style={{ alignSelf: "center", marginRight: 8 }}
                                    onPress={() => {
                                        console.log(colors.current[index]);

                                        Animated.timing(colors.current[index], {
                                            toValue: 1,
                                            duration: 1000,
                                        }).start();
                                        toogleEdited();
                                    }}
                                >
                                    <Animated.View
                                        style={{
                                            borderColor: "#000",
                                            borderWidth: 3,
                                            borderRadius: 100,
                                        }}
                                    >
                                        <Animated.View
                                            style={{
                                                backgroundColor: "#000",
                                                height: 22,
                                                width: 22,
                                                borderRadius: 100,
                                                opacity: colors.current[index],
                                            }}
                                            nativeID={item._id}
                                        ></Animated.View>
                                    </Animated.View>
                                </TouchableOpacity>
                                <View>
                                    <Text style={styles.taskText}>{item.title}</Text>
                                </View>
                            </View>

                            <Animated.View
                                style={{
                                    position: "absolute",
                                    alignItems: "center",
                                    alignContent: "center",
                                    opacity: 0.5,
                                    alignSelf: "center",
                                }}
                            >
                                <Text
                                    style={{
                                        color: "#000",
                                        opacity: 0,
                                        fontSize: 32,
                                    }}
                                >
                                    Done!!
                                </Text>
                            </Animated.View>
                        </TouchableOpacity>
                    ))
                ) : (
                    <View style={styles.emptyContent}>
                        <Text style={styles.emptyText}>This list don't have tasks yet</Text>
                    </View>
                )}
            </ScrollView>
            <TouchableOpacity
                style={{
                    position: "absolute",
                    top: screenHeight - 120,
                    right: 28,
                    flexDirection: "row",
                    width: 50,
                    alignSelf: "flex-end",
                }}
                onPress={() => navigation.navigate("NewTask")}
            >
                <Image source={PlusImage} />
            </TouchableOpacity>
        </View>
    );
}


const{
清洁的
任务，
GetTaskList，
编辑，
Toogle编辑，
删除列表，
}=useContext（listContext）；
const{taskEdited}=useContext（taskContext）；
const[listName，setListName]=useState（“”）；
const screenHeight=数学圆（Dimensions.get（“窗口”）.height）；
const colors=useRef(
Array.from（{length:tasks.length}）.fill（新的动画.Value（0））
);
异步函数getListName（）{
setListName（等待AsyncStorage.getItem（“listName”）；
}
异步函数asyncGetTasks（）{
等待GetTaskList（）；
}
useffect（（）=>{
getListName（）；
asyncGetTasks（）；
}，[已编辑，已编辑]；
返回(
{
清洁（）；
navigation.goBack（）；
}}
>
{
deleteList（）；
清洁（）；
navigation.goBack（）；
}}
>
{listName}
{tasks.length>0(
任务.map（（项目，索引）=>(
{
console.log（colors.current[index]）；
动画。计时（颜色。当前[索引]{
toValue:1，
持续时间：1000，
}).start（）；
toogleEdited（）；
}}
>
{item.title}
完成！！
))
) : (
此列表还没有任务
)}
导航。导航（“NewTask”）}
>
);
}

如果您不明白，请随时询问，我的代码可能很难阅读，但我正在努力

编辑：
我尝试了一些我在这里得到的建议，但仍然适用于所有人，并展示了更多的代码，使其更具综合性
如果将所有元素存储为一个
ref
，则应使其更具动态性

const colors = useRef(Array.from({length: tasks.length} , _ => new Animated.Value(0))).current

使用
.from（{length}，=>…）
为数组中的每个插槽创建具有唯一对象的数组（而不是所有插槽指向的同一对象）

现在，您只能在按下
onPress

onPress={() => {
         console.log(colors[index]);
         Animated.timing(colors[index], {
         toValue: 1,
         duration: 1000,
         }).start();
    }}

另一个注意事项是

不要在不需要按下功能的地方使用
TouchableOpacity
，因为它会阻止可点击性

要在
animated.View
中实现动画行为，应将动画值与View
style
prop链接起来

<Animated.View
    style={{ ...yourStyle... , 
             opacity: colors[index],
       }}
> 



将创建淡入淡出的动画，而
不透明度
将为0/1动画值
如果要将动画应用于每个组件，请仅应用于填充的复选框。我知道这一点，但如何实现@WaheedAkhtarHey，非常感谢你的回答，但它给了我一个错误：未定义不是一个对象（评估'singleValue.stopTracking'）我非常感谢你帮助我，这是我学校的最后一个作业，所以我压力很大。它仍然说这是未定义的“colors.current[index]”可能错误来自我声明它的地方，因为在console.log中它显示这个对象{“current”：未定义，}你能创建expo零食来模拟这个行为吗？我会用假数据制作expo零食，我会发送链接谢谢！！刚检查过就行了，你救了我！