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秒后更改屏幕

回答

相关问题