Javascript '；无法读取未定义的'；对于React本机导航中的全屏模式

我试图在React Native中呈现全屏模式，当单击标题左上角的“Account”按钮时，收到错误消息

无法读取未定义的属性

这件事我哪里做错了

AppNavigator.js文件：

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，{useState}来自“React”；
进口{
按钮
形象,，
情态动词
可按，
文本，
文本输入，
可触摸不透明度，
看法
}从“反应本机”；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
从“../../features/reports/screens/HomeScreen”导入{HomeScreen}；
从“../../features/reports/screens/RiskAssessmentListScreen”导入{RiskAssessmentListScreen}；
从“../../features/reports/screens/modalsscreen”导入{modalsscreen}
const Stack=createStackNavigator（）；
常量AppNavigator=（{navigation}）=>{
返回(
(
navigation.navigate（'MyModal'）}
title=“账户”
/>
),
头灯：（）=>(
),
}}
/>
);
};
导出默认AppNavigator；

和我的ModalScreen.js文件：

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>
  );
}

从“React”导入React
从“react native”导入{视图、文本、按钮}
导出常量ModalScreen=（{navigation}）=>{
返回(
这是一个模态！
navigation.goBack（）}title=“disclose”/>
);
}

导航道具仅在

导航容器

的子项中可用

您现在所做的是访问

导航容器

父级的

导航

，因此

导航

未定义

有几种方法可以解决此问题：

根据您的应用程序结构，将

NavigationContainer

移动到您的

App.js

或

index.js

将

ref

传递给

NavigationContainer

，并参考

ref

了解其方法

---

谢谢，我已经移动了它，并将以这种方式使用它，但很高兴知道！