Реальная исходная страница изменения через 5 секунд

Question

Я новичок в реагировании на родной язык, и я не знаю, как изменить страницу через 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? 

    ); 
    } 


} 

Answer 2

Я - ING lodash для этого:

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