javascript - React native - x 秒后更改屏幕

Question

我有一个我无法解决的问题。

在我的 React native 应用程序中，我想在开始时显示一个欢迎屏幕。然后 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，而且 Navigator 似乎已被弃用。

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