React Native：如何用translateX動畫視圖的位置？

Question

我嘗試了「ENTER現在」按鈕被按下時，將我的觀點關閉屏幕：

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 }