使用 React 导航的启动画面

Question

我创建了一个加载屏幕和一个注册屏幕。我希望在 2 秒后我的加载屏幕出现，这基本上是启动屏幕使用 settimeout 更改为注册屏幕，但它显示：undefined is not an object(evaluating '_this.props')

应用程序在设置时间调用 navigation.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;

LoadingScreen 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",
    },
});

Answer 1

由于您的 LoadingScreen 组件不是屏幕组件，因此它不会自动接收导航道具，因此您需要从 HomeScreen 传递道具

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

并且在您的 LoadingScreen 中，您首先需要将 switchtoAuth 放入没有常量的 class 组件中，然后调用 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

Answer 2

首先，在您的加载屏幕中，switchtoAuth() 函数在 LoadingScreen class 之外，而应该在 LoadingScreen class.

内部

由于您已经将 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);

使用 React 导航的启动画面

Splash screen using react navigation

javascript

react-native

react-navigation

expo

react-navigation-stack