如何从启动屏幕导航到入职屏幕？

Question

这是 SplashScreen.js 页面

我想显示初始屏幕并在超时后不可见，然后导航到入职屏幕（滑动初始屏幕）

import React from 'react';
import { View} from 'react-native';

import LogoImage from './LogoImage.js'
import styles from '../stylesheets/SplashStylesheet.js'


const SplashScreen = ({ navigation }) => {
render() {
        let that = this;
        setTimeout(function(){that.setState({timePassed: true})}, 1000);
        const { navigate } = this.props.navigation;

        if (!this.state.timePassed){
           return (
          <View
                style = {styles.splashScreen}>
                <LogoImage/>
          </View>
        );
    }
    else{
        () => navigate('Onboarding);
    }

export default SplashScreen;

Answer 1

这样试试

import React, { useState } from "react";
import { View, Text, StyleSheet } from "react-native";

const SplashScreen = ({ navigation }) => {
  const [timePassed, setTimePassed] = useState(false);

  setTimeout(function () {
    setTimePassed(true);
  }, 5000);

  if (!timePassed) {
    return (
      <View style={styles.splash}>
        <Text style={styles.text}>Splash Screen</Text>
      </View>
    );
  }
  navigation.navigate('Onboarding Screen');
  return null;
};

const styles = StyleSheet.create({
  splash: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    height: "100vh"
  },
  text: {
    fontSize: 20
  }
});

export default SplashScreen;

我现在在导航发生时设置了警报。您可以将其更改为重定向。

在您的App.js 中，您需要有一个stackNavigator 设置，如下所示，它提供了navigation 属性。

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Splash Screen" >
        <Stack.Screen name="Splash Screen" component={SplashScreen} />
        <Stack.Screen name="Main Page" component={OnboadingPage} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

代码沙箱 => https://codesandbox.io/s/cool-violet-7lqqr?file=/src/App.js