0

我正在尝试让一个简单的滚动动画在本机反应中工作，这真是太棒了。

我想要实现的是组件在被点击后滚动到屏幕的右侧边缘。

无论我对这个类做什么，Attempted to assign to readonly property当我点击元素时都会出现错误，我不知道为什么。

animateOut我可以看到函数中发生的唯一赋值是this.anim.offsetX，但这不能是只读属性，因为我在构造函数中清楚地赋值给它就好了。

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

  1. 从 state 属性中取出可动画的值，因此 animated.timing 调用不会尝试直接改变 state 属性。

  2. 简化动画调用，这样只有一个动画会改变这个值。

  3. 仔细阅读示例：reactjs 动画文档，看看我在做什么不同。

  4. 查找有关堆栈溢出的现有问题。我发现了这个问题，但那里的错误情况似乎不适用于我的代码。

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

    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>
        )

    }

}
4

1 回答 1

1

您必须设置 X 和 Y 的值并将其提供给 Animated.View

此外，您必须为动画提供样式（至少样式是动画使用的道具的名称）。

试试这个：

在 componentWillMount() 中有一个你想开始的位置

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

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

<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();
}

这应该可以正常工作

于 2017-11-23T11:42:43.527 回答