React native 我正在定位错误：ReferenceError:导航未在react native navigation中定义。我只是在学英语

我正在努力学习react native，但出现以下错误

参考错误：未定义导航

我是一个初学者，你能指导我解决这个错误吗

我也试着改为功能组件，但得到了相同的错误

我用世博会来学习

import 'react-native-gesture-handler';

import React, { Component } from "react";
import { ActivityIndicator, StyleSheet, Text, View, Image, Button,ImageBackground } from "react-native";

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

class HomeScreen extends Component {
  render() {
    return (
      <View style = {styles.container}>
      <Text>Hello HomeScreen</Text>
      <Button
        title="Go to Profile"
        onPress={() => navigation.navigate('Profile')}
      />

      </View>
    );
  }
}

class Profile extends Component {
  render() {
    return (
      <View style = {styles.container}>
      <Text>Hello profile</Text>

      </View>
    );
  }
}

const Stack = createStackNavigator();
class App extends Component {
  
  render() {
    return (
      <NavigationContainer>
      <Stack.Navigator initialRouteName="HomeScreen">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profle" component={Profile} />
      </Stack.Navigator>
    </NavigationContainer>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems : 'center'
  },
});

export default App;

导入“反应本机手势处理程序”；
从“React”导入React，{Component}；
从“react native”导入{ActivityIndicator，样式表，文本，视图，图像，按钮，ImageBackground}；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
类主屏幕扩展组件{
render（）{
返回(
你好，主屏幕
navigation.navigate（'Profile'）}
/>
);
}
}
类概要文件扩展了组件{
render（）{
返回(
你好个人资料
);
}
}
const Stack=createStackNavigator（）；
类应用程序扩展组件{
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
辩护内容：“中心”，
对齐项目：“中心”
},
});
导出默认应用程序；

您使用的是基于类的组件，因此请使用this.props.navigation

 <Button
        title="Go to Profile"
        onPress={() => this.props.navigation.navigate('Profile')}
      />

this.props.navigation.navigate（'Profile'）}
/>