类型错误：无法读取未定义的 React Native 的属性“导航”

Question

这是 MainStack.js 中的 Stack Navigator：

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

import Main from './Main'
import ScannerMarker from './ScannerMarker';

const Stack = createStackNavigator();

export default function MainStack() {
    return(
        <Stack.Navigator initialRouteName='Main' screenOptions={{headerShown: false}}>
            <Stack.Screen name='Main' component={Main} />
            <Stack.Screen name='ScannerMarker' component={ScannerMarker} />
        </Stack.Navigator>
    );
}

和 ScannerMarker.js：

import React from 'react';
import { StyleSheet, View, Text, Dimensions, Pressable } from 'react-native';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import Feather from 'react-native-vector-icons/Feather';
import Octicon from 'react-native-vector-icons/Octicons'

import Main from './Main';

export default function ScannerMarker({ navigation, setModalVisible }) {
    return (
        <View style={styles.markerContainer}>
            <View style={styles.topContainer}>
                <View style={styles.topBar}>
                    <MaterialIcon name="support-agent" size={32} color="#fffeef" backgroundColor={'none'} onPress={() => navigation.navigate(Main)} />
                    <Feather name="x" size={32} color="#fffeef" backgroundColor={'none'} onPress={() => navigation.goBack(Support)}/>
                </View>
                <Text style={styles.topText}>Point scanner to{'\n'}vending qr-code</Text>
            </View>
            <View style={styles.middleContainer}>
                <View style={styles.leftContainer}></View>
                <View style={styles.scannerSquare}></View>
                <View style={styles.rightContainer}></View>
            </View>
            <View style={styles.bottomContainer}>
                <Pressable style={styles.button} onPress={() => setModalVisible(false)}>
                    <Octicon name="number" size={20} color="#fffeef" style={styles.chargerIcon}/>
                    <Text style={styles.buttonText}>  Enter vending{'\n'}number</Text>
                </Pressable>
            </View>
        </View>
    )
}

ScannerMarker 是 Scanner.js 中 Scanner 的一部分：

import React from 'react';
import { StyleSheet, Linking, Dimensions} from 'react-native';
import QRCodeScanner from 'react-native-qrcode-scanner';
import { RNCamera } from 'react-native-camera';

import ScannerMarker from './ScannerMarker';

export default function Scanner({ modalVisible, setModalVisible }) {
    onSuccess = e => {
      Linking.openURL(e.data)
      setModalVisible(!modalVisible)
    };
  
    return (
        <QRCodeScanner
            onRead={this.onSuccess}
            flashMode={RNCamera.Constants.FlashMode.auto}
            cameraStyle={styles.cameraStyle}
            showMarker={true}
            customMarker={
                <ScannerMarker setModalVisible={setModalVisible}> </ScannerMarker>
            }
        />
    );
}

MainStack 在 Drawer.js 中的 Drawer Navigator 中呈现：

import React from 'react';
import { StyleSheet, View, Linking} from 'react-native';
import { createDrawerNavigator, DrawerItemList, DrawerContentScrollView, DrawerItem} from '@react-navigation/drawer';
import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';

const Drawer = createDrawerNavigator();

export default function MyDrawer(props) {
    return (
        <Drawer.Navigator
        ...
        >
            <Drawer.Screen
                name='MainStack'
                component={MainStack}
                options={{
                  title: 'Charge Away',
                  drawerIcon: () => (<MaterialCommunityIcon name="lightning-bolt" size={45} color="#2E2A00" style={{marginEnd: -30, marginStart: -10}} />)
                }}
            />
            ...
        <Drawer.Navigator>
    );
}

当我按下带有"onPress={() => navigation.navigate(...)}"或onPress={() => navigation.goBack()}的图标时，出现以下错误：

类型TypeError: Cannot read property 'navigate' of undefined和TypeError: Cannot read property 'goBack' of undefined

所以我不知道是什么问题。 navigation参数已声明，所有组件都在 Stack Navigator 中。

一切都包装在 App.js 的 NavigationContainer 中：

import * as React from 'react';
import { NavigationContainer} from '@react-navigation/native';

import MyDrawer from './components/Drawer'

export default function App() {
  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}

Answer 1

我已经使用 useNavigation function 解决了这个问题：

import { View, Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

export default function MyComp() {
    const navigation = useNavigation();
    return (
        <View>
            <Button
                title="Go to Home"
                onPress={() => navigation.navigate('Home')}
            />
        </View>
    );
};

另一种选择是使用道具将导航传递给 MyComp：

export default function MyComp( {navigation} ) {
    //...
};

<MyComp navigation={props.navigation} />

资料来源： https://reactnavigation.org/docs/connecting-navigation-prop