反應本機動畫根本不運行

Question

我的問題與React Native似乎是項目範圍。任何使用Animated API的東西都不會運行。我正在運行React Native 0.49.2, 似乎沒有任何工作，我已經嘗試了幾個人的代碼，沒有發生任何事情。這個問題似乎是每當我打電話給「Animated.Timing（）。start（）;」它從來沒有真正開始。下面有一些簡短的示例代碼：

class Splash extends React.Component { 

    constructor(props){ 
    super(props); 

    this.state = { 
     ShowSetup: true, 
     fadeAnim: new Animated.Value(0), // Initial value for opacity: 0 
    }; 

    } 

    componentDidMount(){ 
    this.Animator() 
    } 

    Animator(){ 
    console.log("ANIMATOR RUNNING!") 
    Animated.timing(     // Animate over time 
    this.state.fadeAnim,   // The animated value to drive 
    { 
     toValue: 1,     // Animate to opacity: 1 (opaque) 
     duration: 10000,    // Make it take a while 
    } 
    ).start();      // Starts the animation 


    } 


    render() { 
    let { fadeAnim } = this.state; 
    return (
     <View style={{flex: 1, backgroundColor: 'blue'}}> 

     <Animated.View     // Special animatable View 
     style={{ 
     opacity: fadeAnim,   // Bind opacity to animated value 
     }} 
    > 
     <Text>Fade In</Text> 
    </Animated.View> 
     </View> 
    ); 
    } 
} 

無論你等多長時間，該值將不會出現。已成爲一個大摸不到頭腦的我，我不知道自己還能做些什麼

Answer 1

試試這個：

<View style={{flex: 1, backgroundColor: 'blue'}}> 

    <Animated.View     // Special animatable View 
    style={{ 
     opacity: this.state.fadeAnim, // Bind opacity to animated value 
    }} 
    > 
     <Text>Fade In</Text> 
    </Animated.View> 
    </View> 

我認爲你在聲明的頂部fadeAnim變量渲染是不被重新分配

- 編輯 -

這裏是我用過的一些動畫代碼，渲染的實現方式與您的實現方式相同。

constructor() { 
    super(); 
    this.state = { 
     topBoxOpacity: new Animated.Value(0), 
     leftBoxOpacity: new Animated.Value(0), 
     mainImageOpacity: new Animated.Value(0), 
    } 
    } 

    componentDidMount() { 
    const timing = Animated.timing; 
    Animated.parallel([ 
     timing(this.state.leftBoxOpacity, { 
     toValue: 1, 
     duration: 700, 
     delay: 700, 
     }), 
     timing(this.state.topBoxOpacity, { 
     toValue: 1, 
     duration: 700, 
     delay: 1400, 
     }), 
     timing(this.state.mainImageOpacity, { 
     toValue: 1, 
     duration: 700, 
     delay: 2100, 
     }), 
    ]).start(); 
    }