React Native Pan Responder对单个动态视图进行动画处理

Question

我正在网格中创建一系列多维数据集，我只想移动被按下的多维数据集。目前，在我的代码中，它将所有多维数据集移动为一个。我尝试找到多维数据集的单个键来尝试将其定位为动画，但是到目前为止，我仍然没有运气来解决这个问题。

myPanel组件仅用于布局renderCube函数中定义的多维数据集。即使我添加了键，使用Animated.View布置所有多维数据集也可能是一个问题，但是我无法访问或弄清楚如何仅对选定的多维数据集进行专门的动画处理。

import React, { Component } from 'react';
import { TouchableWithoutFeedback, View, ImageBackground, Dimensions, Animated, PanResponder } from 'react-native';
import myPanel from './myPanel';

const DATA = [
{ id: 1, color: '#ff8080' },
{ id: 2, color: '#80ff80' },
{ id: 3, color: '#ffff80' }
];

const winWidth = Dimensions.get('window').width;
const widthCalc = winWidth/400;
const cubeWidth = widthCalc*74;
const winHeight = Dimensions.get('window').height;
const heightCalc = ((winHeight-winWidth)/2)-5;
const xPush = 5*widthCalc;
const borRadius = 7.4*widthCalc;
let cnt = 0;
let xMove = 0;
let yMove = 0;
let currTarget = '033';

class Board extends Component {
    constructor(props) {
        super(props);
        this.state = {
          pan: new Animated.ValueXY()
        };
    }

    componentWillMount() {
        this._panResponder = PanResponder.create({
            onMoveShouldSetResponderCapture: () => true,
            onMoveShouldSetPanResponderCapture: () => true,
            onStartShouldSetPanResponder:(e, gestureState) => true,
            onPanResponderGrant: (e, gestureState) => {
              console.log(this.currTarget);
            },
            onPanResponderMove: Animated.event([
                null,
                {
                  dx: this.state.pan.x,
                  dy: this.state.pan.y,
                },
            ]),
            onPanResponderRelease: () => {
                Animated.spring(
                  this.state.pan,
                  {toValue: {x: 0, y: 0}},
                ).start();
            }
        });
    }

    renderCube(item) {
        return (
            <Animated.View {...this._panResponder.panHandlers} 
            style={this.state.pan.getLayout()} key={item.id}>
                <TouchableWithoutFeedback 
                onPressIn={()=>{this.currTarget = item.id; console.log('Set '+item.id);}}>
                    <View
                        style={{
                            backgroundColor:myColor,
                            width:cubeWidth,
                                        height:cubeWidth,
                                        position: 'absolute',
                                        top: yMove,
                                        left: xMove,
                                        bottom: 0,
                                        right: 0,
                                        borderRadius:borRadius
                        }}
                    ></View>
                </TouchableWithoutFeedback>
            </Animated.View>
        );
    }

    render() {
        return (
                <myPanel 
                        data={DATA}
                        renderCube={this.renderCube.bind(this)}
                    />
        );
    }
}

export default Board;