React native - x秒後更改屏幕

在我的React本機應用程序中，我想在開始時顯示歡迎屏幕。然後5秒鐘後關閉它，並顯示另一個。兩者都是兩個完全不同的屏幕，不需要保留「回來」箭頭。

我一直在尋找小時，但我還沒有找到如何去做。

這裏是我的代碼現在：

import Defis from './components/defis' 
import Quote from './components/quote' 

export default class Betty extends Component { 
    componentDidMount(){ 
     // Start counting when the page is loaded 
     this.timeoutHandle = setTimeout(()=>{ 
      // Add your logic for the transition 
      this.props.navigation.navigate('Defis') // what to push here? 
     }, 5000); 
    } 

    componentWillUnmount(){ 
     clearTimeout(this.timeoutHandle); 
    } 

    render() { 
     return (
      <Quote/> 
     ); 
    } 
}

是否有人知道該怎麼辦呢？

我無法使用Navigator.push，此外，導航器似乎不推薦使用。

來源

2017-07-05 David Martins

不使用任何導航這可以解決你的問題

import Defis from './components/defis' 
import Quote from './components/quote' 

export default class Betty extends Component { 
constructor(props){ 
super(props) 
this.state = { 
    component : <Quote /> 
} 
} 


componentDidMount(){ 

    // Start counting when the page is loaded 
    this.timeoutHandle = setTimeout(()=>{ 
      // Add your logic for the transition 
      this.setState({ component: <Defis /> }) 
    }, 5000); 
} 

componentWillUnmount(){ 
    clearTimeout(this.timeoutHandle); 
} 

render() { 
return (
    this.state.component 
);

來源

2017-07-06 08:58:01

我當時做的事情與「react-native-router-flux」差不多。簡單地渲染第一個屏幕，你的情況的「報價」，然後在componentDidMount設置：

setTimeout(() => { 
    Actions.yourNextSceneName() 
    }, milliseconds)

希望這有助於。

來源

2017-07-06 07:46:57

我已經做到了這一點，顯示登錄畫面閃屏後react-native如下：

import Login from './Login'; // My next screen 
.... 
.... 
const {navigate} = this.props.navigation; 
setTimeout(() => { 
    navigate('Login'); //this.props.navigation.navigate('Login') 
}, 5000); //5000 milliseconds

我已經使用react-navigation爲導航目的。

來源

2017-07-06 09:07:25

React native - x秒後更改屏幕

回答

相關問題