Javascript 拖动移动的动画。图像与反应本机

我正在用react native制作一个短游戏，其中一个图像一次使用动画从屏幕的顶部移动到底部。现在我需要的运动图像是可拖动的，以便我可以编程后的下降部分。我已经在使用PanResponder，但仍然无法拖动图像。你可以在下面看到我的代码。有没有办法解决这个问题？谢谢你的关注

import React from 'react';
import { StyleSheet, Text, View, Image, StatusBar, Dimensions, Animated, TouchableOpacity, PanResponder } from 'react-native';
import { Actions } from 'react-native-router-flux';

const largura = Dimensions.get('window').width;
const altura = Dimensions.get('window').height;

export default class JogoArrasto extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            left: Math.floor(Math.random() * ((largura - 120) - 120)) + 120,
            randomImg: Math.floor(Math.random() * (5 - 1)) + 1,
            ingCair: null,
            maca: require('../imgs/maca.png'),
            doce: require('../imgs/doce.png'),
            gema: require('../imgs/gema.png'),
            corpoDeus: require('../imgs/corpoDeus.png'),
            acucar: require('../imgs/acucar.png'),
            pan: new Animated.ValueXY(),   //Step 1 do drag & drop
            ingCertos: 0,
            ingErrados: 0
        }

        this.animatedValue2 = new Animated.Value(0);

        this.panResponder = PanResponder.create({    //Step 2 do drag & drop
            onStartShouldSetPanResponder: () => true,
            onPanResponderMove: Animated.event([null, { //Step 3 do drag & drop
                dx: this.state.pan.x,
                dy: this.state.pan.y
            }]),
            onPanResponderRelease: (e, gesture) => { } //Step 4 do drag & drop
        });
    }

    componentDidMount() {
        if (this.state.randomImg === 1) {
            this.setState({
                ingCair: this.state.maca
            })
        } else if (this.state.randomImg === 2) {
            this.setState({
                ingCair: this.state.doce
            })
        } else if (this.state.randomImg === 3) {
            this.setState({
                ingCair: this.state.gema
            })
        } else if (this.state.randomImg === 4) {
            this.setState({
                ingCair: this.state.corpoDeus
            })
        } else if (this.state.randomImg === 5) {
            this.setState({
                ingCair: this.state.acucar
            })
        }

        this.moveIng2();
    }

    moveIng2 = () => {
        console.log('ing: ' + this.state.randomImg);

        this.animatedValue2.setValue(-120);

        Animated.sequence([
            Animated.timing(this.animatedValue2, {
                toValue: -120,
                duration: 1
            }),
            Animated.timing(this.animatedValue2, {
                toValue: 600,
                duration: 3000
            })
        ]).start(() => {
            this.animatedValue2.addListener(({
                value
            }) => this._value = value);

            let valor = this.animatedValue2._value.toFixed(1);
            this.confere(valor);
        });


    }

    confere = (atualValorIng) => {
        if (atualValorIng == 600) {
            Animated.timing(this.animatedValue2).stop();

            const novoRandom = Math.floor(Math.random() * (5 - 1)) + 1;

            this.setState({
                left: Math.floor(Math.random() * ((largura - 120) - 120)) + 120,
                randomImg: novoRandom
            })

            if (this.state.randomImg === 1) {
                this.setState({
                    ingCair: this.state.maca
                })
            } else if (this.state.randomImg === 2) {
                this.setState({
                    ingCair: this.state.doce
                })
            } else if (this.state.randomImg === 3) {
                this.setState({
                    ingCair: this.state.gema
                })
            } else if (this.state.randomImg === 4) {
                this.setState({
                    ingCair: this.state.corpoDeus
                })
            } else if (this.state.randomImg === 5) {
                this.setState({
                    ingCair: this.state.acucar
                })
            }


            this.moveIng2();
        }
    }

    render() {
        return (
            <View style={styles.main}>
                <StatusBar hidden />
                <TouchableOpacity style={styles.circle} onPress={() => { Actions.menu(); }}>
                    <Text style={styles.textoMenu}>Menu</Text>
                </TouchableOpacity>
                <View style={styles.viewImg}>
                    <Image style={styles.img1} source={require('../imgs/cestoOutros.png')} />
                    <Image style={styles.img2} source={require('../imgs/tacho.png')} />
                </View>

                <Animated.Image
                {...this.panResponder.panHandlers}
                style={[this.state.pan.getLayout(), {
                    position: 'absolute',
                    width: 90,
                    top: this.animatedValue2,
                    left: this.state.left
                }]} source={this.state.ingCair} />

            </View>
        );
    }
}

const styles = StyleSheet.create({
    main: {
        backgroundColor: '#324C5A',
        flex: 1,
        width: '100%',
        height: '100%',
        flexWrap: 'wrap',
        alignItems: 'center',
        alignContent: 'center',
    },
    circle: {
        width: 160,
        height: 80,
        justifyContent: 'center',
        borderBottomLeftRadius: 180,
        borderBottomRightRadius: 180,
        backgroundColor: '#fff',
        marginBottom: 20
    },
    textoMenu: {
        color: '#1D1D1D',
        fontWeight: 'bold',
        textAlign: 'center',
        fontSize: 18
    },
    img1: {
        display: 'flex',
        width: 128,
        marginRight: 20
    },
    img2: {
        display: 'flex',
        width: 128
    },
    viewImg: {
        flexDirection: 'row',
        justifyContent: 'center',
        position: 'absolute',
        bottom: 10,
        alignContent: 'center'
    }
})

从“React”导入React；
从“react native”导入{样式表、文本、视图、图像、状态栏、维度、动画、TouchableOpacity、PanResponder}；
从“react native router flux”导入{Actions}；
const largura=维度.get（'window'）。宽度；
const altura=尺寸.get（'window'）。高度；
将默认类导出到扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
左：Math.floor（Math.random（）*（（largura-120）-120））+120，
randomImg:Math.floor（Math.random（）*（5-1））+1，
ingCair:null，
maca:require（'../imgs/maca.png'），
doce:require（'../imgs/doce.png'），
gema:require（'../imgs/gema.png'），
corpoDeus:require（'../imgs/corpoDeus.png'），
acucar:require（'../imgs/acucar.png'），
平移：新建动画.ValueXY（），//第1步执行拖放操作
ingCertos:0，
ingErrados:0
}
this.animatedValue2=新的Animated.Value（0）；
this.panResponder=panResponder.create（{//第2步执行拖放操作
onStartShouldSetPanResponder:（）=>true，
onPanResponderMove:Animated.event（[null，{//第3步执行拖放操作
dx：这个州，泛x，
戴：这个。州。潘。y
}]),
onPanResponderRelease:（e，手势）=>{}//第4步执行拖放操作
});
}
componentDidMount（）{
if（this.state.randomImg==1）{
这是我的国家({
英格尔：这个。州。马卡
})
}else if（this.state.randomImg==2）{
这是我的国家({
英格尔：这个。州。文件
})
}else if（this.state.randomImg==3）{
这是我的国家({
英格尔：这个州
})
}else if（this.state.randomImg==4）{
这是我的国家({
英格尔：这个州，科波德乌斯
})
}else if（this.state.randomImg==5）{
这是我的国家({
英格尔：这个。州。阿库卡
})
}
这个。移动2（）；
}
移动2=（）=>{
console.log（'ing:'+this.state.randomImg）；
这个.animatedValue2.setValue（-120）；
动画序列([
动画。计时（此。动画值2{
toValue:-120，
持续时间：1
}),
动画。计时（此。动画值2{
总价值：600，
持续时间：3000
})
]).start（（）=>{
此文件为.animatedValue2.addListener(({
价值
})=>此值。_值=值）；
设valor=this.animatedValue2.\u value.toFixed（1）；
授予（勇气）；
});
}
协商=（协商）=>{
如果（atualValorIng==600）{
Animated.time（this.animatedValue2.stop（）；
常量novoRandom=数学楼层（数学随机（）*（5-1））+1；
这是我的国家({
左：Math.floor（Math.random（）*（（largura-120）-120））+120，
随机性
})
if（this.state.randomImg==1）{
这是我的国家({
英格尔：这个。州。马卡
})
}else if（this.state.randomImg==2）{
这是我的国家({
英格尔：这个。州。文件
})
}else if（this.state.randomImg==3）{
这是我的国家({
英格尔：这个州
})
}else if（this.state.randomImg==4）{
这是我的国家({
英格尔：这个州，科波德乌斯
})
}else if（this.state.randomImg==5）{
这是我的国家({
英格尔：这个。州。阿库卡
})
}
这个。移动2（）；
}
}
render（）{
返回(
{Actions.menu（）；}}>
菜单
);
}
}
const styles=StyleSheet.create({
主要内容：{
背景颜色：“#324C5A”，
弹性：1，
宽度：“100%”，
高度：“100%”，
flexWrap:“wrap”，
对齐项目：“居中”，
对齐内容：“中心”，
},
圆圈：{
宽度：160，
身高：80，
为内容辩护：“中心”，
边界半径：180，
边界右下角半径：180，
背景颜色：“#fff”，
marginBottom:20
},
textoMenu：{
颜色：“#1d”，
fontWeight:'粗体'，
textAlign:'中心'，
尺寸：18
},
img1：{
显示：“flex”，
宽度：128，
marginRight:20
},
img2：{
显示：“flex”，
宽度：128
},
视图img：{
flexDirection:'行'，
为内容辩护：“中心”，
位置：'绝对'，
底部：10，
对齐内容：“中心”
}
})

更新

---

如果我对这两行注释

top:this.animatedValue2，left:this.state.left

我可以拖动图像，但它不会从屏幕的顶部下降到底部。请帮助…

我不知道您到底想要什么，但在注释完

顶部：this.animatedValue2

左：this.state.left

您对dragg的图像响应后

  <Animated.Image
                {...this.panResponder.panHandlers}
                style={[this.state.pan.getLayout(), {
                    position: 'absolute',
                    width: 90,
                    height:500,

                    // top: this.animatedValue2, <--- comment out this line
                    // left: this.state.left     <--- comment out this line
                }]}source={this.state.ingCair} />