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

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 和渲染中使用 setTimeout。我也尝试过使用箭头函数与不使用箭头函数。我在这里使用 setTimeout 完全错误吗？恐怕我不明白为什么它不会在 3 秒后导航到下一个屏幕。提前致谢！

Answer 1

您没有调用函数，请使用括号来调用。另外，第一个参数是一个回调，所以把你的调用放在一个函数里，像这样：

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

或者在箭头函数中：

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

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

Navigating to another component using setTimeout does not run

javascript

settimeout

reactjs

react-native

react-native-router-flux

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

Navigating to another component using setTimeout does not run

javascript

settimeout

reactjs

react-native

react-native-router-flux

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