时间戳

首页 > 解决方案 > 如何在array.map上仅对按下的索引进行动画处理

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

问题描述

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

我只想在按下的视图上开始缩放动画。

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

这是我的功能组件：

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>
    );
};

标签： javascriptreact-native

解决方案

Ok I fixed it within next way:

Just created new component and rendered it with 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>
    )
};

推荐阅读