我正在构建一个应用程序，我想使用 React-navigation 来浏览页面，目前我有两个， HomeScreen 和 Contact ，我内置了一个表单，所以我必须将不同的组件导入到 app.js 中，比如标题，然后我将按钮导航到 ContentContainer 组件内，作为具有 TouchableOpacity 属性的图像。

这导致我无法将导航按钮的参数传递给 app.js，当我按下按钮时出现此错误：

TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')

这些是涉及导航的组件：

App.js：

import React, { Component } from 'react';
import { StyleSheet, ScrollView, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import Header from './app/components/Header';
import Banner from './app/components/Banner';
import ContentContainer from './app/components/ContentContainer';


class HomeScreen extends Component {
  render() {
    return (
      <ScrollView style={styles.container}>
        <Header />
        <Banner />
        <ContentContainer />
        <Button
          title="Go to Details"
          onPress={() => navigation.navigate('Contact')}
        />
      </ScrollView>
    );
  }
}

function Contact() {
  return (
    <ScrollView style={styles.container}>
      <Header />
      <Banner />
    </ScrollView>
  );
}

const Stack = createStackNavigator();

export default function App() {
  console.log('app started');
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Contact" component={Contact} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

ContentContainer.js：

import React from 'react';
import { StyleSheet, View, TouchableOpacity } from 'react-native';

import CustomImage from './CustomImage';

export default class ContentContainer extends React.Component {
  render() {
    const { navigate } =this.props.navigation;
    return (
        <View style={styles.contentcontainer}>

            <TouchableOpacity style={styles.col2} 
                onPress={() => navigate('Contact')}
            >
                <View >
                    <CustomImage imageSource={require('../img/img2.jpg')}
                        header='Towels'
                    />
                </View>
            </TouchableOpacity>


            <View style={styles.col1}>
                <CustomImage imageSource={require('../img/img3.jpg')}
                    header='Shoes'
                />
            </View>

            <View style={styles.contentBanner}>
                <CustomImage imageSource={require('../img/img1.jpg')}
                    header='Wristwatch'
                    paragraph='This is an example text'
                />
            </View>

            <View style={styles.col1}>
                <CustomImage imageSource={require('../img/img2.jpg')}
                />
            </View>

            <View style={styles.col2}>
                <CustomImage imageSource={require('../img/img3.jpg')}
                />
            </View>

        </View>
    );
  }
}

const styles = StyleSheet.create({
    contentcontainer: {
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap',
        padding: 5
    },
    col1: {
        flex: 1,
        padding: 5
    },
    col2: {
        flex: 1.4,
        padding: 5
    },
    contentBanner: {
        width: '100%',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 5
    }
});