Question

我遇到了一个无法解决的问题。

在我的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，而且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
);

Answer 2

我这样做是为了在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进行导航。

Answer 3

我用“react-native-router-flux”做了几乎相同的事情。只需渲染第一个屏幕，在您的情况下为“引用”，然后在 componentDidMount 中设置：

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

希望这有帮助。

Answer 4

这对我有用：

import { NavigationActions } from "react-navigation";

componentDidMount(){
    setTimeOut( () => {
        NavigationActions.navigate('login');
    }, 5000 );
}

Answer 5

您可以使用导航器来实现此目的，方法是返回带有onLayout道具的View并将setTimeout函数添加到道具。

React native - 在x秒后更改屏幕

5 个答案: