Esta es la página SplashScreen.js
Quiero que se muestre la pantalla de inicio y que se vuelva invisible por un tiempo de espera y luego navegar a la pantalla de incorporación (pantallas de inicio deslizantes)
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;Prueba así
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;Configuré una alerta cuando ocurre la navegación por ahora. Puede cambiarlo para redirigir.
En su App.js , debe tener una configuración de stackNavigator como la que se muestra a continuación, que proporciona el accesorio de 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> ); };Caja de arena de código => https://codesandbox.io/s/cool-violet-7lqqr?file=/src/App.js