javascript - js react native : How to animate a view's position with translateX?

Question

当按下“立即输入”按钮时，我试图将我的 View 移出屏幕:

export class Onboarding extends Component {

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

  hideOnboarding() {
    console.log("hiding"); // <-------- prints out when button pressed
    Animated.timing(
      this.state.offsetX,
      { toValue: new Animated.Value(-100) }
    ).start();
  }

  render() {
    return (
      <Animated.View style={{ transform: [{translateX: this.state.offsetX}] }}>
        ...
        <TouchableOpacity onPress={ () => { this.hideOnboarding() } }>
          <View style={styles.enterButton}>
            <Text style={styles.buttonText}>Enter Now</Text>
          </View>
        </TouchableOpacity>
      </Animated.View>
    );

但是当我点击我的按钮时，没有任何东西在移动。我的控制台语句虽然有效。有谁知道我做错了什么？

Answer 1

我认为你需要改变:

{ toValue: new Animated.Value(-100) }

到

{ toValue: -100 }