始终未定义this.props.navigation

我总是收到错误（TypeError:undefined不是一个对象（计算'\u this.props.navigation.navigate'））。我尝试了很多解决方案，但都没有成功。所有这些都会导致相同的错误。你能检查一下我的密码并告诉我出了什么问题吗

这是我的密码。 你能帮助我吗

import React, {Component} from 'react';
import { FlatList,TouchableOpacity, Text, Button, View,Image, ActivityIndicator, Platform} from 'react-native';

export default class Project extends Component {
 

  constructor(props)
  {
    super(props);
    this.state = { 
    isLoading: true,
    }

  }

  render() {

    if (this.state.isLoading) {
      return (
        <View style={{flex: 1, paddingTop: 20}}>
          <ActivityIndicator />
        </View>
      );
    }

    return (

<View style={styles.MainContainer} >

 <FlatList       
          data={ this.state.dataSource }        
          ItemSeparatorComponent = {this.FlatListItemSeparator}
          renderItem={({item}) => 
            <TouchableOpacity onPress={ () => this.props.navigation.navigate('DetailPage') 
           
            } style={{flex:1, flexDirection: 'row'}}>                
            <Text style={styles.FlatListItemStyle}  > {item.title} </Text>
            </TouchableOpacity>
        }
        keyExtractor={(item, index) => index}    
 />
</View>           
    );
  }

  componentDidMount() {
       return fetch('http://192.152.79.6/lcu/pages/testReactNative')
         .then((response) => response.json())
         .then((responseJson) => {
           this.setState({
             isLoading: false,
             dataSource: responseJson
           }, function() {
            
           });
         })
         .catch((error) => {
           console.error(error);
         });
     }

FlatListItemSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: "100%",
          backgroundColor: "#607D8B",
        }}
      />
    );
  }
}

import React，{Component}来自'React'；
从“react native”导入{FlatList、TouchableOpacity、文本、按钮、视图、图像、ActivityIndicator、平台}；
导出默认类项目扩展组件{
建造师（道具）
{
超级（道具）；
this.state={
孤岛加载：是的，
}
}
render（）{
if（此.state.isLoading）{
返回(
);
}
返回(
this.props.navigation.navigate（'DetailPage'）
}style={{flex:1，flexDirection:'row'}}>
{item.title}
}
keyExtractor={（项，索引）=>index}
/>
);
}
componentDidMount（）{
返回获取（'http://192.152.79.6/lcu/pages/testReactNative')
.then（（response）=>response.json（））
.然后（（responseJson）=>{
这是我的国家({
孤岛加载：false，
数据来源：responseJson
}，函数（）{
});
})
.catch（（错误）=>{
控制台错误（error）；
});
}
FlatListItemSeparator=（）=>{
返回(
);
}
}

我已经添加了这些功能，并且效果良好：

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

在App.js文件的末尾：

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Project} />
      <Stack.Screen name="DetailPage" component={DetailPage} />
    </Stack.Navigator>
  );
}
export default function App() {
  return (
    <NavigationContainer>
      <MyStack />
    </NavigationContainer>
  );
}

const Stack=createStackNavigator（）；
函数MyStack（）{
返回(
);
}
导出默认函数App（）{
返回(
);
}

您是否已在导航堆栈中添加了屏幕“详细信息页”？没有，如何添加？我是个新来的本地人。快乐编码！！