本当のネイティブ - x秒後に画面を変更

Question

私は解決できなかった問題があります。

私のReactネイティブアプリケーションでは、最初に開始画面を表示したいと思います。それから5秒後にもう一度閉じ、別のものを表示してください。どちらも2つの全く異なる画面で、「戻る」矢印を保持する必要はありません。

私は何時間も探していますが、どうやってそれを行うのか分かりませんでした。ここで

は、今の私のコードです：

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を使用できません。また、ナビゲータは非推奨と思われます。

Answer 1

これは

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 
); 

Answer 2

「反応するネイティブルータフラックス」とほぼ同じことをしていました。 は単に「引用」あなたのケースでは、最初の画面を描画し、その後componentDidMountに設定：

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

・ホープ、このことができます。任意のナビゲーターを使用しない

Answer 3

あなたの問題を解決することができ、私は次のように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を使用していましたナビゲーション目的。