React native 位置更改后未更新动画元素显示

我是一个新手，不太熟悉本地反应，所以我很可能遗漏了一些核心概念。 我想创建一个可拖动的元素，并能够将其移回原始位置

第一部分是可以的，但是当我尝试更新位置时，它看起来是可以工作的（因为当我再次单击时，元素会返回到其原始位置），但是视图没有更新

我尝试调用

setState

和

forceUpdate

，但它没有更新视图

你们知道为什么吗

以下是我目前的演示：

import React from 'react';
import {Button, StyleSheet, PanResponder, View, Animated} from 'react-native';

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

        const rectanglePosition = new Animated.ValueXY({ x: 0, y: 0 })
        const rectanglePanResponder = this.createPanResponder();

        this.state = {
            rectanglePosition,
            rectanglePanResponder
        }
    }

    createPanResponder = () => {
        return PanResponder.create({
            onStartShouldSetPanResponder: () => true,
            onPanResponderMove: (event, gesture) => {
                this.state.rectanglePosition.setValue({ x: gesture.dx, y: gesture.dy });
            },
            onPanResponderRelease: () => {
                this.state.rectanglePosition.flattenOffset();
            },
            onPanResponderGrant: () => {
                this.state.rectanglePosition.setOffset({
                    x: this.state.rectanglePosition.x._value,
                    y: this.state.rectanglePosition.y._value
                });
            }
        });
    }

    resetPosition = () => {
        const newPosition = new Animated.ValueXY({ x: 0, y: 0 })

        this.setState({ rectanglePosition: newPosition }) // I thought updating the state triggered a re-render
        this.forceUpdate() // doesn't work either
    }

    getRectanglePositionStyles = () => {
        return {
            top: this.state.rectanglePosition.y._value,
            left: this.state.rectanglePosition.x._value,
            transform: this.state.rectanglePosition.getTranslateTransform()
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <Animated.View 
                    style={[styles.rectangle, this.getRectanglePositionStyles()]}
                    {...this.state.rectanglePanResponder.panHandlers}>
                </Animated.View>

                <View style={styles.footer}>
                    <Button title="Reset" onPress={this.resetPosition}></Button>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        borderColor: 'red',
        backgroundColor: '#F5FCFF',
    },
    footer: {
        borderWidth: 1,
        width: '100%',
        position: 'absolute',
        bottom: 0,
        left: 0,
        backgroundColor: 'blue',
    },
    rectangle: {
        position: 'absolute',
        height: 50,
        width: 50,
        backgroundColor: 'red'
    }
});

从“React”导入React；
从“react native”导入{按钮、样式表、PanResponder、视图、动画}；
导出默认类场景扩展React.Component{
建造师（道具）{
超级（道具）
const rectanglePosition=new Animated.ValueXY（{x:0，y:0}）
const rectanglePanResponder=this.createPanResponder（）；
此.state={
矩形位置，
矩形应答器
}
}
createPanResponder=（）=>{
返回PanResponder.create({
onStartShouldSetPanResponder:（）=>true，
onPanResponderMove：（事件、手势）=>{
this.state.rectanglePosition.setValue（{x:sirport.dx，y:sirport.dy}）；
},
onPanResponderRelease:（）=>{
this.state.rectanglePosition.flattleOffset（）；
},
onPanResponderGrant:（）=>{
this.state.rectanglePosition.setOffset({
x:this.state.rectanglePosition.x.\u值，
y：这个。状态。矩形位置。y.。\u值
});
}
});
}
重置位置=（）=>{
const newPosition=new Animated.ValueXY（{x:0，y:0}）
this.setState（{rectanglePosition:newPosition}）//我认为更新状态会触发重新渲染
这个.forceUpdate（）//也不起作用
}
getRectanglePositionStyles=（）=>{
返回{
顶部：此.state.rectanglePosition.y.\u值，
左：此.state.rectanglePosition.x.\u值，
transform:this.state.rectanglePosition.getTranslateTransform（）
}
}
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
边框颜色：“红色”，
背景颜色：“#F5FCFF”，
},
页脚：{
边框宽度：1，
宽度：“100%”，
位置：'绝对'，
底部：0，
左:0,，
背景颜色：“蓝色”，
},
矩形：{
位置：'绝对'，
身高：50，
宽度：50，
背景颜色：“红色”
}
});

如果您的唯一目的是将其放在左上角：

resetPosition=（）=>{
this.state.rectanglePosition.setValue（{x:0，y:0}）；
};