I am geeting error : ReferenceError: navigation is not defined in react native navigation. I am just learning react native

Question

我正在尝试学习 React Native 但出现以下错误

ReferenceError: 未定义导航

我是初学者，请指导我解决这个错误。

我也尝试过更改为功能组件，但遇到同样的错误。

我正在使用 expo 进行学习

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;

Answer 1

您正在使用基于 class 的组件，因此请使用 this.props.navigation

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