React Native 导航中全屏模式的“无法读取未定义的属性导航”

Question

当单击标题左上角的“帐户”按钮但收到错误时，我正在尝试在 React Native 中呈现全屏模式

无法读取未定义的属性导航

我哪里错了？

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;

还有我的 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>
  );
}

Answer 1

navigation 属性仅在 NavigationContainer 的子级中可用。

您现在正在做的是访问NavigationContainer 的父级的navigation，所以navigation 是未定义的。

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

1. 将 NavigationContainer 移动到您的 App.js 或 index.js，具体取决于您的应用结构。
2. 将ref 传递给NavigationContainer，并引用ref 的方法，as shown in documentation。