undefined不是一个对象(评估'this.props.navigation.navigate') - React Native，而基于函数方法的导航

Question

每当我尝试导航时，我都会得到异常。 我已经将所有库添加到反应堆栈导航器中，并且当我搜索解决方案时，有两种方法是函数，另一种是基于类的。

应用程序.js - 我的主要应用程序.js

import React from 'react';
import { StyleSheet, Text, View,Button,Image,Alert} from 'react-native';
import Navigator from './routes/routes1';
export default function App() {
return (
/*Header*/
<Navigator />
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
homebutton:{
width:300,
},
});

路线.js

import {createStackNavigator} from 'react-navigation-stack';
import {createAppContainer} from 'react-navigation';
import LoginScreen from '../components/loginscreen';
import ResetHomeScreen from '../components/validateuser';
const screens = {
Home: {
screen: LoginScreen
},
About: {
screen: ResetHomeScreen
},
initialRouteName: {
screen: 'Home'
}
}
const loginstack= createStackNavigator(screens);
export default createAppContainer(loginstack);

登录屏幕.js -导航屏幕 1

import React from 'react';
import { StyleSheet, Text, View,Button,Image,Alert} from 'react-native';
export default function LoginScreen(){
return(
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to About"
onPress={() => this.props.navigation.navigate('Home')}
/>
</View>
);
}

验证用户.js -导航屏幕 2

import React from 'react';
import { StyleSheet, Text, View,Button,Image,Alert} from 'react-native';
export default function ValidateUser(){
return(
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>About Screen</Text>
</View>
);
}

请帮助我解决这个问题，也请建议我哪种方法是基于最佳类或基于函数的。

Answer 1

如果你使用功能组件，你不能使用this.props.navigation.navigate('Home'(}

因此，与其像这样使用它：

export default function LoginScreen(props){
return(
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to About"
onPress={() => props.navigation.navigate('Home')}
/>
</View>
);
}

Answer 2

您还可以使用 react hook 函数来访问功能组件中的导航对象。

import { useNavigation } = '@react-navigation/native';
const navigation = useNavigation();