Question

我正在尝试在React Native中创建一个加载屏幕，一旦完成setTimeout函数的时间，它将导航到确认屏幕。目前，屏幕加载，但在setTimeout间隔后没有导航到确认屏幕。

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

我尝试在componentDidMount和render中使用setTimeout。我还试过使用和箭头功能而不是使用箭头功能。我在这里使用setTimeout完全错了吗？我担心我不明白为什么它会在3秒后无法导航到下一个屏幕。提前谢谢！

Answer 1

您没有调用该函数，请使用括号来执行此操作。此外，第一个参数是回调，所以将你的invokation放在一个函数中，如下所示：

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

或箭头功能：

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

使用setTimeout导航到另一个组件不会运行

1 个答案: