如何仅对array.map 上的按下索引进行动画处理

Question

我有一个视图列表，每个视图都包含删除按钮。

我想仅在按下视图时开始横向扩展 animation。

现在，使用下一个代码，当我按下删除按钮时，此列表中的所有视图都是动画的。

这是我的功能组件：

export const SubTasksView = ({subTasks, onAddSubTask, subTaskValue, setSubTaskValue, onPressDeleteSubTask}) => {

    const removeAnim = new Animated.Value(1);

    const startRemoveAnimation = () => {
        Animated.timing(
            removeAnim,
            {
                toValue: 0,
                duration: 300,
                useNativeDriver: true
            }
        ).start();
    };

    const onPressDeleteSubTaskHandler = index => {
        startRemoveAnimation();
        setTimeout(() => {
            onPressDeleteSubTask(index);
        }, 300);
    };


    return (
        <View style={styles.mainContainer}>
            <View style={styles.textInputContainerStyle}>
                <TextInput
                    style={styles.textInputStyle}
                    placeholder={strings.PLACEHOLDER_SUB_TASK}
                    value={subTaskValue}
                    onChangeText={setSubTaskValue}
                />

                <TouchableOpacity style={styles.addButtonStyle} onPress={onAddSubTask}>
                    <Ionicons name={icons.ICON_ADD} size={35} color={color.ORANGE}/>
                </TouchableOpacity>
            </View>

            {subTasks.map((subTask, index) => {
                return (
                    <Animated.View key={subTask + 'd' + index}
                                   style={[styles.subTasksContainer,
                                       {
                                           transform: [
                                               {scale: removeAnim}
                                           ]
                                       }
                                   ]}>
                        <Text style={styles.subTaskText}>{subTask}</Text>
                        <TouchableOpacity onPress={() => {
                            onPressDeleteSubTaskHandler(index)
                        }}>
                            <Ionicons name={icons.ICON_TRASH} size={20} color={color.DARK_GREY}/>
                        </TouchableOpacity>
                    </Animated.View>
                );
            })}

        </View>
    );
};

Answer 1

好的，我在下一个方法中修复了它：

刚刚创建了新组件并使用 FlatList 渲染它

export const SubTaskItem = ({subTask, renderedIndex, onPressDeleteButton}) => {

    const removeAnim = new Animated.Value(1);

    const onDeletePressHandler = () => {
        Animated.timing(
            removeAnim,
            {
                toValue: 0,
                duration: 100,
                useNativeDriver: true
            }
        ).start(() => {
            onPressDeleteButton(renderedIndex)
        });
    };

    return(
        <Animated.View style={[styles.subTasksContainer,
            {
                transform: [
                    {scale: removeAnim}
                ]
            }]}>
            <Text style={styles.subTaskText}>{subTask}</Text>
            <TouchableOpacity onPress={() => onDeletePressHandler()} >
                <Ionicons name={icons.ICON_TRASH} size={20} color={color.DARK_GREY}/>
            </TouchableOpacity>
        </Animated.View>
    )
};