Question

我有一段时间试图让一个简单的滚动动画在本机中起作用。

我想要实现的是，在点击屏幕后，该组件会滚动屏幕的右边缘。

无论我对这门课程做什么，当我点击该元素时，我会收到错误Attempted to assign to readonly property，而我无法弄清楚原因。

我在animateOut函数中看到的唯一一项任务是this.anim.offsetX，但这不是一个只读属性，因为我在构造函数中明确指定了它。

我尝试过的事情，但没有帮助：

将动画值从state属性中取出，因此animated.timing调用不会尝试直接改变状态属性。
简化动画调用，以便只有一个动画可以改变此值。
仔细阅读the reactjs animation docs上的示例，看看我做的不同。
查找有关堆栈溢出的现有问题。我找到了this question，但错误条件似乎并不适用于我的代码。

有人可以告诉我我做错了吗？

    export default class SquareBlock extends Component {

    constructor(props) {
        super(props);
        this.anim = {};
        this.anim.offsetX = new Animated.Value(0);

    }

    animateOut() {
        console.log("animating out");

        console.log("X offset:",this.anim.offsetX)

        Animated.timing(
           this.anim.offsetX,
           { toValue: 120,
             duration: 500
           }
        ).start();


    }


    render() {

        let content = this.props.content || "Tappable";
        let offsetX;

        offsetX = this.anim.offsetX;

        return (
            <Animated.View >
            <TouchableNativeFeedback onPress={ () => this.animateOut() }>
                <View style={ [styles.outerBox, { "left": offsetX } ]  }  >

                    <Text style={ styles.text }> { content }</Text>

                </View>
            </TouchableNativeFeedback>
            </Animated.View>
        )

    }

}

Answer 1

您必须设置X和Y的值并将其赋予Animated.View

此外，你必须为动画提供一种风格（至少风格是动画使用的道具的名称）。

试试这个：

在componentWillMount（）

中有一个你想要开始的位置

componentWillMount() {
        //important
        this.position = new Animated.ValueXY({x: 30 , y: 0});
}

在你的Animated.View中，你必须提供this.position作为样式//如上所述，style是动画的道具名称。

<Animated.View style={this.position.getLayout()}> //very important
    <TouchableNativeFeedback onPress={ () => this.animateOut() }>
                <View style={ [styles.outerBox, { "left": offsetX } ]  }  >

                    <Text style={ styles.text }> { content }</Text>

                </View>
    </TouchableNativeFeedback>
 </Animated.View>

和

animateOut() {    
         this.position ,
         Animated.timing(this.position, {
            toValue: { x: this.position + 20 , y: 0},
            duration: 250
         }).start();
}

这应该可以正常使用

获取简单的滚动动画以在本地反应

1 个答案: