删除数组项目反应原生移动项目位置

Question

好吧，可能标题不是很清楚，我解释一下。

我能够将图像添加到数组并显示它们，在屏幕上拖放。现在是问题。

例如，我在数组中有 3 个图像，将它们定位在屏幕上的不同位置。当我删除图像 2（确实被删除）时，图像 3 被移动到原始图像 2 的位置，而它应该保持在自己的位置。

我该怎么做？

这是我使用的代码：

import StageGesture from '../components/stageGesture';

const [ finalArray, setFinalArray ] = useState([]);

const onRemove = ({ item }) => {
    let imgName = item.imagetitle;

    const newFinalArray = finalArray.filter(finalItem =>  finalItem.imagetitle !== imgName);

    setFinalArray(newFinalArray);
    setArrayLength(newFinalArray);
};

return (
    <View style={{ flex: 1,backgroundColor:'white' }}>
        {finalArray.map((item, i) =>  (
            // setArrayLength(item.length),
            // console.log('item', item),
            <StageGesture id={item.key} xval={item.valX} yval={item.valY} imagetitle={item.imagetitle} stageimage={item.stageimage} parent={id} onPress={() => onRemove({item})} />
        ))}
    </View>
)

StageGesture 文件：

import React, { useState, useCallback, useEffect, createRef, useRef } from 'react';
import { 
    TouchableHighlight, 
    Animated,
    PanResponder,
} from 'react-native';
import { Image } from 'react-native-elements';
import ContextMenu from 'react-native-context-menu-view';
import firestore from '@react-native-firebase/firestore';

const stagesRef = firestore().collection('stages');

const StageGesture = ({id, imagetitle, stageimage, xval, yval, onPress, parent}) => {

    const [ contextMenuOpen, setConextMenuOpen ] = useState(false);
    const [ img, setImg ] = useState('');
    const [ imgTitle, setImgTitle ] = useState('');
    const [ x, setX ] = useState(0);
    const [ y, setY ] = useState(0);

    useEffect(() => {
        setImg(stageimage);
        setImgTitle(imagetitle);
    }, []);

    const pan = useState(new Animated.ValueXY({x: xval, y: yval}))[0];
    const panResponder = useState(
        PanResponder.create({
            onMoveShouldSetPanResponder: () => true,
            onPanResponderGrant: () => {
                pan.setOffset({
                    x: pan.x._value,
                    y: pan.y._value
                });
                pan.setValue({x: xval, y: yval});
            },
            onPanResponderMove: Animated.event(
                [
                    null,
                    { dx: pan.x, dy: pan.y }
                ],
                {useNativeDriver: false}
            ),
            onPanResponderRelease: () => {
                pan.flattenOffset();
                stagesRef.doc(parent).collection('stageimages').doc(id)
            .update({
                    x: pan.x._value,
                    y: pan.y._value,
                }).then(function() {
                
                });
            }
        })
    )[0];
    return (
        <Animated.View
            key={id}
            style={{
                transform: [{ translateX: pan.x }, { translateY: pan.y }],
                alignSelf: 'flex-start',
                // position: 'absolute',
                elevation: 2 
                // left: 20, 
                // top: 40
            }}
            {...panResponder.panHandlers}
        >
            <ContextMenu actions={[
                {
                    title: `Delete ${imgTitle}`,
                    systemIcon: 'trash',
                    destructive: true,
                },
            ]} onPress={onPress}>
                <TouchableHighlight onLongPress={() => setConextMenuOpen(true)} activeOpacity={0.7} underlayColor="transparent">
                    <Image source={stageimage} style={{height: 100,width: 100}} resizeMode='contain' />
                </TouchableHighlight>
            </ContextMenu>
        </Animated.View>
    );
}

export default StageGesture

Answer 1

const newFinalArray = finalArray.filter(finalItem =>  finalItem.imagetitle !== imgName);

当您使用过滤器时，您正在创建一个新数组，因此在这种情况下您需要使用map 而不是filter 将元素替换为NULL。

const newFinalArray = finalArray.map(finalItem =>finalItem.imagetitle !== imgName ? finalItem : null);

并像这样在渲染时检查它：

return (
    <View style={{ flex: 1,backgroundColor:'white' }}>
        {finalArray.map((item, i) =>  {
            return item ? <StageGesture id={item.key} xval={item.valX} yval={item.valY} imagetitle={item.imagetitle} stageimage={item.stageimage} parent={id} onPress={() => onRemove({item})} /> : <EmptyImage>
...

您也可以使用 delete 删除数组元素，它将替换 带有undefined 或null 的元素（测试一下）。