题意：TypeError: 无法读取未定义的属性 'navigate'（React Native）

问题背景：

Here's a Stack Navigator inside a MainStack.js:

这是 `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>
    );
}

And 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 is a part of a Scanner in Scanner.js:

`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 is rendered inside a Drawer Navigator in Drawer.js:

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

When i press on icons with "onPress={() => navigation.navigate(...)}" or onPress={() => navigation.goBack()} I get the following errors:

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

TypeError: Cannot read property 'navigate' of undefined and TypeError: Cannot read property 'goBack' of undefined

So I don't know what's the problem. navigation parameter is declared and all of the components are in the Stack Navigator.

所以我不知道问题出在哪里。`navigation` 参数已经声明，并且所有组件都在 Stack Navigator 中。

Everything is wrapped in NavigationContainer in App.js:

所有内容都在 `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>
  );
}

问题解决：

I've solved the problem with useNavigation hook:

我通过使用 `useNavigation` 钩子解决了这个问题：

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

Another option is to pass navigation to MyComp with props:

另一个选项是通过 props 将 `navigation` 传递给 `MyComp`：

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

<MyComp navigation={props.navigation} />

Source: Access the navigation prop from any component | React Navigation