使用react导航启动屏幕

Question

我已经创建了一个加载屏幕和一个注册屏幕。我希望在2秒钟后，我的加载屏幕开始，基本上是启动屏幕，使用settimeout更改为注册屏幕，但它显示：未定义不是对象(正在评估'_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",
},
});

Answer 1

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

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

在LoadingScreen中，首先需要将switchtoAuth放入不带const的类组件中，然后调用navigation.navigation:

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类之外，而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组件DidMount((中执行

setTimeout(() => this.props.navigation.navigate("reg"), 2000);