问“无法读取未定义的属性导航”用于反应本地导航中的全屏模式

EN

import React, {useState} from 'react';
import {
  Button,
  Image,
  Modal,
  Pressable,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {HomeScreen} from '../../features/reports/screens/HomeScreen';
import {RiskAssessmentListScreen} from '../../features/reports/screens/RiskAssessmentListScreen';
import {ModalScreen} from '../../features/reports/screens/ModalScreen'

const Stack = createStackNavigator();

const AppNavigator = ({navigation}) => {

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="GoPAD"
          component={HomeScreen}
          options={{
            headerLeft: () => (
              <Button
        onPress={() => navigation.navigate('MyModal')}
        title="Account"
      />
            ),
            headerRight: () => (
              <Image
                style={{tintColor: 'blue'}}
                source={require('../../../assets/img/refreshIcon.png')}
              />
            ),
          }}
        />
        <Stack.Screen name="MyModal" component={ModalScreen} />
        <Stack.Screen
          name="Fire Risk Assessment - Flats"
          component={RiskAssessmentListScreen}
          options={{headerBackTitle: 'Back'}}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default AppNavigator;

import React from 'react'
import {View, Text, Button} from 'react-native'


export const ModalScreen = ({navigation}) => {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text style={{fontSize: 30}}>This is a modal!</Text>
      <Button onPress={() => navigation.goBack()} title="Dismiss" />
    </View>
  );
}