ReactNative：未定義不是 object（評估“navigation.navigate”）

Question

我嵌入了底部導航選項卡，並在第一個選項卡上有主屏幕。 我想 go 從登錄按鈕上的登錄屏幕到主視圖，主屏幕位於第一個選項卡上。 下面是登錄屏幕的代碼。 在onPress={goToHome}我收到此錯誤：

TypeError: undefined is not an object (evaluating 'navigation.navigate')

import {
  View,
  Text,
  Button,
  TextInput,
  StyleSheet,
  Image,
  TouchableOpacity
} from 'react-native'
import React from 'react'
import { styleProps } from 'react-native-web/dist/cjs/modules/forwardedProps';
import { color } from 'react-native-reanimated';
import MainContainer from '../MainContainer';

export default function LoginScreen({ navigation }) {
  const goToHome = () => {
    navigation.navigate('MainContainer')
  }
  const [text, onChangeText] = React.useState("ExD-");
  const [password, onChangePassword] = React.useState();

  return (
    <View style={styles.container}>
      <Image
        source={require('../../assets/Logo/logo.png')}
        style={{ width: 150, height: 150, paddingTop: 60 }}
      />
      <Text style={styles.loginText}>Login</Text>
      <TextInput
        style={styles.input}
        onChangeText={onChangeText}
        value={text}
      />
      <TextInput
        style={styles.inputPassword}
        onChangeText={onChangePassword}
        value={password}
        secureTextEntry={true}
      />

      <Button title='Login' onPress={goToHome} />

      <View style={styles.forgotPasswordView}>
        <TouchableOpacity underlayColor='#fff'>
          <Text style={styles.forgotPasswordText}>Forgot Password?</Text>
        </TouchableOpacity>
      </View>
    </View >
  )
}

Answer 1

登錄和 MainContainer 屏幕應添加到導航器容器中以使用導航道具或使用 useNavigation 鈎子