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

Question

我对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'
    }
});

Answer 1

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

resetPosition = () => {
  this.state.rectanglePosition.setValue({ x: 0, y: 0 });
};

注意！如果没有州的https://snack.expo.io/@ziyoshams/stack-overflow，请参阅这个小吃，看看你是如何做到的