5秒後にネイティブ変更に反応します

Question

私は初心者です。私は5秒後にページを変更する方法がわかりません。

私はLandingPage.jsにナビゲートしますandroid.index.jsファイルを作成します。私がしたいことは、LandingPageがロードされると、5秒間待ってから別のページにリダイレクト/ナビゲートすることです。

index.android.js

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

LandingPage.jsあなたは、標準JSの設定と同じように、簡単なsetTimeoutを使用することができます

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

：

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? 

    ); 
    } 


} 

Answer 2

私は私たちです

export default class Splash extends React.Component { 

    constructor(props) { 
     super(props); 
    } 

    async componentWillMount() { 
     _.delay(() => this.props.navigator.replace({ component: 'login' }), 1000); 
    } 

    render() { 
     return (
      ... 
     ); 
    } 
} 

これは、Navigatorが設定されている場合にのみ機能します。この記事をチェックしてください：それはレンダリングしまったものの

React Native Navigator — Navigating Like A Pro in React Native