javascript React native -x秒后更改屏幕

mfuanj7w  于 2023-05-05  发布在  Java
关注(0)|答案(7)|浏览(181)

我有个问题一直没能解决
在我的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,而且Navigator似乎已被弃用。

x7yiwoj4

x7yiwoj41#

不使用任何导航器这可以解决您的问题

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

plupiseo2#

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

mum43rcc

mum43rcc3#

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

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

希望这能帮上忙。

67up9zun

67up9zun4#

这对我很有效:

import { NavigationActions } from "react-navigation";

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

vs91vp4v5#

您可以使用navigator来实现这一点,方法是返回一个带有onLayout属性的View,并向该属性添加setTimeout函数。

qni6mghb

qni6mghb6#

如何在React Native中超时后导航到另一个屏幕:
所以我已经创建了我的导航结构和相应的页面。
使用ReactNative中的函数组件,对你想要导航的组件执行以下操作:

function MyPresentScreen( {navigation}, props ){
      setTimeout(() => {
       navigation.navigate('MyTargetScreen');
     }, 2500);
      return(
        <Text>My Present Screen that I will navigate from after some seconds</>
      )
    };

请注意,您可以根据需要自定义超时。上面的时间是2秒半。鸣谢:尽管它是用类组件编写的,this article还是帮助我弄清楚了这一点:

aemubtdh

aemubtdh7#

由于大多数答案使用 legacy react-native代码,因此添加一个 functional react。我会显示图像(* 徽标 *)3秒,然后移动到主屏幕(没有后退按钮),如:

export default function App() {

  const [flag, setFlag] = useState(false);

  useEffect(() => {
    setTimeout(() => {
      setFlag(true)
    }, 3000)
  },[]);

  return (
    <NavigationContainer>
      <View style={styles.container}>
        {!flag ? <Image source={require('./assets/images/Logo.png')} /> : <Dashboard />}
      </View>
    </NavigationContainer>
  );
}

相关问题