在React Native中完成动画时触发功能吗？

Question

I'm implementing a Splash Screen using React Native and i'm simply using a StackNavigator to change the route to the Main activity when the animations in Splash Screen are completed. To do this, I'm trying to find a way for triggering the this.props.navigation.navigate('Main') function.

The question is that how i can implement the onComplete function in my animation class?

Here is my animation code:

import React from 'react';
import { Animated, Text, View } from 'react-native';

class FadeInView extends React.Component {
state = {
    fadeAnim: new Animated.Value(0),  // Initial value for opacity: 0
}

componentDidMount() {
    Animated.timing(                  // Animate over time
    this.state.fadeAnim,            // The animated value to drive
    {
        toValue: 1,                   // Animate to opacity: 1 (opaque)
        duration: 1000,              // Make it take a while
    }
    ).start();                        // Starts the animation
}

render() {
    let { fadeAnim } = this.state;

    return (
    <Animated.View                 // Special animatable View
        style={{
        ...this.props.style,
        opacity: fadeAnim,         // Bind opacity to animated value
        }}
    >
        {this.props.children}
    </Animated.View>
    );
}
}

export default FadeInView

and my SplashScreen :

import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image
} from 'react-native';
import FadeInView from '../Animations/FadeInAnimation';
import { StackNavigator } from 'react-navigation';
import RanjoorMain from './RanjoorMain';

class SplashScreen extends Component {
render() {
    return (
    <View style={styles.container}>
        <View style={{flex:1}}></View>
        <FadeInView style={{width: 230, height: 230, backgroundColor: 'transparent'}}>
            <Image style={styles.introLogo}
            source={require('../Images/Logo/Ranjoor.png')}
            />
        </FadeInView>
        <View style={{flex:1}}></View>
    </View>
    );
}
}

const styles = StyleSheet.create({
container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#3863cc',
},
welcome: {
    fontSize: 45,
    textAlign: 'center',
    margin: 10,
},
instructions: {
    textAlign: 'center',
    color: '#242329',
    marginBottom: 5,
},
introLogo: {
    width: 230,
    height: 230
}
});

/* This StackNavigator will change the route to the RanjoorMain.js after a couple of ms */
const GoToRanjoorMain = StackNavigator({
    Splash: { screen: Splas },
    Main: { screen: RanjoorMain }
})

GoToRanjoorMain.navigationOptions = {
title: 'Ranjoor', 
};

export default SplashScreen

Answer 1

You can provide a completion handler to that start method of an animation.

Animated.timing(              
    this.state.fadeAnim,          
    {
        toValue: 1,        
        duration: 1000,            
    }
).start(() => nav.goToSomeScreen());