Question

我已经创建了一个加载屏幕和一个Registartion屏幕。我希望两秒钟后我的加载屏幕进入，基本上是启动屏幕使用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;

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传递道具

"set x = 'value'; //BEFORE
Select 
'L1: LOOP
    set y = ''value2''
    SELECT ''L2: LOOP...END LOOP L2;'';
END LOOP L1;'; //Cur OuterMost LOOP
if x = 'value' then SELECT 'LEAVE L1'; //AFTER"

，然后在您的LoadingScreen中，首先需要将switchtoAuth放在没有const的类组件中，然后调用navigation.navigate：

Pattern pattern = Pattern.compile("(?i)\\bLOOP\\b")
Matcher matcher = pattern.matcher(body)
if (matcher.find()) {
  int start = matcher.start()
  int end = StringUtils.lastIndexOf(body, "END LOOP")
  String beforeLoop = body[0..start - 1].replaceAll("''", "'")
  String afterLoop = body[end + 8..-1].replaceAll("''", "'")
  return beforeLoop + body[start..end + 7] + afterLoop
}
  return body.replaceAll("''", "'")

Answer 2

首先，在加载屏幕中，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);

使用反应导航启动屏幕

2 个答案: