使用帮助程序方法 getLayout() 时引发的错误

Question

我不确定代码出了什么问题。我正在使用一个辅助方法getLayout()来使我的元素位置进行动画处理。默认情况下，根据此文档 http://browniefed.com/react-native-animation-book/api/GETLAYOUT.html，它应该存在于ValueXY中。

非常感谢一些帮助和解释。

import React, { Component } from 'react';
import { View, Animated } from 'react-native';
class Ball extends Component {
  conponentWillMount() {
    this.position = new Animated.ValueXY(0,0);
    Animated.spring(this.position, {
      toValue: { x: 200, y: 500 }
    }).start();
  }
  render() {
    return (
      <Animated.View style={this.position.getLayout()}>
        <View style={styles.ball} />
      </Animated.View>
    );
  }
}
const styles = {
  ball: {
    height: 60,
    width: 60,
    borderRadius: 30,
    borderWidth: 30,
    borderColor: 'red'
  }
}
export default Ball;`enter code here`

Answer 1

只是一个错字 - conponentWillMount -> componentWillMount .这阻止了您的初始化，并意味着this.position未定义，从而导致访问this.position.getLayout时出错。