Экран-заставка с использованием реактивной навигации

Я создал экран загрузки и экран регистрации. Я хотел бы, чтобы через 2 секунды мой экран загрузки появлялся, что в основном представляет собой заставку, меняющуюся на экран регистрации с использованием settimeout , но он показывает: undefined не является объектом (оценка '_this.props')

Приложение работает отлично до экрана загрузки, когда установленное время вызывает навигацию. natvigate(reg), оно выдает ошибку

App.js

import React,{Component, useState} from "react";
import { StyleSheet, Text, View } from "react-native";
import { AppLoading } from 'expo';
import * as Font from 'expo-font';

import Registrationscreen from './screen/Registrationscreen';
import Loadingscreen from './screen/Loadingscreen';

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


function HomeScreen() {
  return (  
    <Loadingscreen/>   
  );
}

function Registration() {
  return (
    <Registrationscreen/>
         );
    }

 const Stack = createStackNavigator();

 const getFonts = () => Font.loadAsync({
  'light':require('./assets/font/font.ttf')
});

 function App() {

  const [fontsLoaded, setFontsLoaded] = useState(false);

  if(fontsLoaded){
    
    return (
   <NavigationContainer>
     <Stack.Navigator initialRouteName="home" screenOptions={{
    headerShown: false
  }}>
       <Stack.Screen name="home" component={HomeScreen}></Stack.Screen>
       <Stack.Screen name="reg" component={Registration}></Stack.Screen>

       
     </Stack.Navigator>
   </NavigationContainer>
    );
  } else{
    return (
    <AppLoading
      startAsync={getFonts}
      onFinish={()=> setFontsLoaded(true)}
      />
    )
  }

  
  
  }

  export default App;

Загрузочный экран js

import React, { Component, useState } from 'react';
import  {View, Image, Text , StyleSheet, Animated} from 'react-native';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationActions } from "react-navigation";
import Logo from '../assets/Logo.png';
 
    const switchtoAuth = () =>{
        
        this.props.navigation.navigate("reg");

            
     
      };

 class Loadingscreen extends Component {
     state = {
         LogoAnime: new Animated.Value(0),
         LogoText: new Animated.Value(0),
         loadingSpinner: false,
     };

    
     componentDidMount() {
     
         const {LogoAnime, LogoText} = this.state;
         Animated.parallel([
             Animated.spring(LogoAnime, {
                 toValue: 1,
                 tension: 20,
                 friction: 1,
                 duration: 2000,
                 
              }).start(),

             Animated.timing(LogoText, {
                 toValue: 1,
                 duration: 1,
                 useNativeDriver: true
             }),
            ]).start(() => {
                  this.setState({
                      loadingSpinner: true,
                  });

                  setTimeout(switchtoAuth,1200);
            });
         
     }

    render () {
        return (
          <View style={styles.container}> 
           <Animated.View 
             style={{
               opacity: this.state.LogoAnime,
               top: this.state.LogoAnime.interpolate({
                inputRange: [0, 1],
                outputRange: [80, 0],
            }),
        }}>
        <Image source={Logo} />
        </Animated.View>  
        
        <Text style={styles.logotext}> AL HANA  </Text>
       
               
        </View>
         );
    }
}

export default Loadingscreen;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#036BDD',
        justifyContent: 'center',
        alignItems: 'center',
    },

    logotext:{
        
        color: '#FFFFFF',
        fontFamily: 'light',
        fontSize: 26,
        position: "absolute",
        top: 700,
        fontWeight: "bold",
        letterSpacing: 3,
        textAlign: "center",
    },
});

react-native javascript expo react-navigation react-navigation-stack
person ceeejeey    schedule 05.10.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

поскольку ваш компонент LoadingScreen не является компонентом экрана, он не получит навигационную поддержку автоматически, поэтому вам нужно пройти через реквизиты из HomeScreen.

function HomeScreen({ navigation }) {
  return (  
    <Loadingscreen navigation={navigation}/>   
  );
}

и в вашем LoadingScreen сначала вам нужно поместить switchtoAuth внутри компонента класса без const, а затем вызвать navigation.navigate:

class Loadingscreen extends Component {
     state = {
         LogoAnime: new Animated.Value(0),
         LogoText: new Animated.Value(0),
         loadingSpinner: false,
     };

     switchtoAuth = () =>{
        
      this.props.navigation.navigate("reg");
    
     };

     // the rest of your component
person Marc Victor    schedule 05.10.2020

arrow_upward
0
arrow_downward

Прежде всего, на экране загрузки функция switchtoAuth() находится вне класса LoadingScreen, который должен быть внутри класса LoadingScreen.

Поскольку вы уже сделали LoadingScreen как экран, просто добавьте его в NavigationContainer.

<NavigationContainer>
     <Stack.Navigator initialRouteName="home" screenOptions={{ headerShown: false}}>
       <Stack.Screen name="Splash" component={LoadingScreen}></Stack.Screen> //add LoadingScreen here
       <Stack.Screen name="home" component={HomeScreen}></Stack.Screen>
       <Stack.Screen name="reg" component={Registration}></Stack.Screen>
     </Stack.Navigator>   
</NavigationContainer>

И внутри LoadingScreen componentDidMount() сделайте это

setTimeout(() => this.props.navigation.navigate("reg"), 2000);
person rishikesh_07    schedule 06.10.2020