Navigieren zu einer anderen Komponente mit setTimeout wird nicht ausgeführt

Question

Ich versuche, einen Ladebildschirm in React Native zu erstellen, die zu einem Bestätigungsbildschirm navigieren wird, sobald die Zeit von einer SetTimeout-Funktion erfüllt wurde. Momentan wird der Bildschirm geladen, navigiert jedoch nicht zum Bestätigungsbildschirm nach dem setTimeout-Intervall.

import React from 'react'; 
import { Text, View, Image } from 'react-native'; 
import { Actions as NavigationActions } from 'react-native-router- 
flux'; 

import styles from './styles'; 

export default class ProcessingLoader extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {}; 
} 



componentDidMount() { 
    setTimeout(this.navigateToConfirmation, 3000); 
    } 



navigateToConfirmation() { 
    NavigationActions.checkoutConfirmation({ product: this.props.product, type: 'reset' }); 
    } 



renderLoader() { 
    return (
     <View style={styles.textContainer}> 
     <Text style={styles.loaderText}>Processing Order ...</Text> 
     </View> 
    ); 
    } 



render() { 

    return (
     <View style={{ flex: 1 }}> 
     {this.renderLoader()} 
     </View> 
    ); 
    } 
} 

Ich habe versucht, SetTimeout in ComponentDidMount sowie in Render. Ich habe auch versucht, und pfeil funktion vs nicht mit einer pfeil funktion. Setze ich setTimeout hier komplett falsch? Ich habe Angst, dass ich nicht verstehe, warum es nicht nach 3 Sekunden zum nächsten Bildschirm navigiert. Danke im Voraus!

Answer 1

Sie rufen die Funktion nicht auf, verwenden Sie Klammern, um das zu tun. Auch ist der erste Parameter ein Rückruf so setzen Sie Ihre Invokation in einer Funktion, wie folgt aus:

componentDidMount() { 
    setTimeout(function(t){t.navigateToConfirmation()}, 3000, this); 
} 

oder in einer Pfeilfunktion:

componentDidMount() { 
    setTimeout(() => {this.navigateToConfirmation()}, 3000); 
}