错误 React Native with Expo, Navigation ''navigation.navigate is not a function"

Question

我正在使用 Expo(Typescript) 和 Ract-navigation 创建一个简单的 React 本机应用程序。 我定义了两个屏幕，登录和主页，当我尝试从登录导航到主页时，会产生错误：

“TypeError：navigation.navigate 不是函数。（在 'navigation.navigate('Home')' 中，'navigation.navigate' 未定义）”

我的主要代码：

App.tsx

import React, {useState} from 'react';
import { NavigationContainer, StackActions } from '@react-navigation/native';
import Navigator from './Components/Navigator';

export default class App extends React.Component {
  render(){
   return (
     <NavigationContainer>
       <Navigator/>
     </NavigationContainer>
  );
 }
}

Navigator.tsx

import React from 'react'
import { createStackNavigator } from '@react-navigation/stack'
import Login from '../Views/Login'
import Home from '../Views/Home'

const Stack = createStackNavigator();

const Navigator= () =>{
   return (
        <Stack.Navigator>
            <Stack.Screen name="Login" component={Login} />
            <Stack.Screen name="Home" component={Home} options={{title:'Home.'}}/>
        </Stack.Navigator>
   );
}

export default Navigator;

Login.tsx（按下按钮时，如果 texinputs 有值则导航到 Home.tsx）

import React, {useState} from 'react'
import {Text, TextInput, View, Image, Button } from 'react-native'
import styles from './Styles/LoginStyles'

const Login=(navigation)=>{
  const [result, setResult] =useState(false);
  const [userName, setUserName] =useState('');
  const [password, setPassword] =useState('');

  return( 
    <View style={styles.container}>
      <Image source={{uri: "https://www.clipartmax.com/png/middle/104-1046810_coffee-png-picture-banner-for-opening-restaurant.png"}}
    style={styles.imgLog}/>
      <Text style={{fontSize:30, paddingBottom:10}}>Welcome!</Text>
      <TextInput placeholder="Username..." defaultValue={userName} onChangeText={txt=> setUserName(txt)} style={styles.txtInputsLog}/>
      <TextInput placeholder="Password..." defaultValue={password} onChangeText={txt=> setPassword(txt)} style={styles.txtInputsLog} secureTextEntry={true}/>
      <Button title="Login" onPress={()=> (userName.length>0 && password.length>0)? navigation.navigate('Home') : setResult(!result)}/>

      {result?<Text>Usuario: {userName}, Password: {password}</Text> : null}
    </View>
   );
}

export default Login;

Answer 1

完整的工作应用程序：Expo Snack

import React, { useState } from 'react';
import { Text, TextInput, View, Image, Button, StyleSheet } from 'react-native';

const Login = ({navigation}) => {
  const [result, setResult] = useState(false);
  const [userName, setUserName] = useState('');
  const [password, setPassword] = useState('');

  return (
    <View style={styles.container}>
      <Image
        source={{
          uri:
            'https://www.clipartmax.com/png/middle/104-1046810_coffee-png-picture-banner-for-opening-restaurant.png',
        }}
        style={styles.imgLog}
      />
      <Text style={{ fontSize: 30, paddingBottom: 10 }}>Welcome!</Text>
      <TextInput
        placeholder="Username..."
        defaultValue={userName}
        onChangeText={(txt) => setUserName(txt)}
        style={styles.txtInputsLog}
      />
      <TextInput
        placeholder="Password..."
        defaultValue={password}
        onChangeText={(txt) => setPassword(txt)}
        style={styles.txtInputsLog}
        secureTextEntry={true}
      />
      <Button
        title="Login"
        onPress={() =>
          userName.length > 0 && password.length > 0
            ? navigation.navigate('Home')
            : setResult(!result)
        }
      />

      {result ? (
        <Text>
          Usuario: {userName}, Password: {password}
        </Text>
      ) : null}
    </View>
  );
};

export default Login;