jsReact Native：如何使用 translateX 为视图的位置设置动画？

Question

当按下“立即进入”按钮时，我试图将我的视图移出屏幕：

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 }