react-native - 5 秒后响应 native 更改页面

Question

我是 React Native 的新手，我不知道如何在 5 秒后更改页面。

我创建了一个 android.index.js 将导航到 的文件LandingPage.js .我想要做的是，当加载 LandingPage 时，它​​会等待 5 秒钟，然后重定向/导航到另一个页面。

index.android.js

export default class DefaultProject extends Component {
 render() {
    return (
      <Navigator
        renderScene={(route, navigator) =>
          <LandingPage/>
        }
      />
  )

LandingPage.js

export default class LandingPage extends Component {
  render() {
    return (
        <Image source={require('./images/event3.jpeg')} 
        style={styles.container} />
        //How to redirect to another page from here after 5 secs?

    );
  }
}

Answer 1

您可以使用一个简单的 setTimeout ，就像在标准 JS 设置中一样:

export default class LandingPage extends Component {
    componentDidMount(){
         // Start counting when the page is loaded
         this.timeoutHandle = setTimeout(()=>{
              // Add your logic for the transition
         }, 5000);
    }

    componentWillUnmount(){
         clearTimeout(this.timeoutHandle); // This is just necessary in the case that the screen is closed before the timeout fires, otherwise it would cause a memory leak that would trigger the transition regardless, breaking the user experience.
    }

    render() {

    return (
        <Image source={require('./images/event3.jpeg')} 
        style={styles.container} />
        //How to redirect to another page from here after 5 secs?

    );
  }


}