反应本机动画根本不运行

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(); 
    }