Javascript React本机功能组件-未定义不是对象（评估'；导航'；）

我正在练习在react native中从类组件移动到功能组件，并且我在理解如何从组件访问导航时遇到困难。通常我会运行类似于

this.props.navigation.navigate（'screen'）

的程序。现在我通常通过

导航

作为道具

但在下面的示例中，它似乎不起作用。我哪里做错了？我正在使用react导航：

import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Container, Form, Input, Item, Button, Label } from "native-base";

import * as firebase from "firebase";

const LoginForm = ({navigation}) => {

    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
  
    const addEmail = (email) => {
      setEmail(email)
    }
  
    const addPassword = (password) => {
      setPassword(password)
    }

    return (
        <Form>
            <Item floatingLabel>
                <Label>Email</Label>
                <Input
                    autoCorrect={false}
                    autoCapitalize="none"
                    onChangeText={(email)=>addEmail(email)}
                />
            </Item>
            <Item floatingLabel>
                <Label>Password</Label>
                <Input
                    secureTextEntry={true}
                    autoCorrect={false}
                    autoCapitalize="none"
                    onChangeText={(password)=>addPassword(password)}
                />
            </Item>
            <Button style={{ margin: 10 }}
                full
                rounded
                success
                onPress={()=>handleLogin(email, password, navigation)}
            >
                <Text style={{ color: 'white' }}>Login</Text>
            </Button>
        </Form>
    );
};

export default LoginForm;





const handleLogin = (email, password, navigation) => {
    console.log(email, password)
    firebase.auth()
    .signInWithEmailAndPassword(email.trim(), password)
    .then(() => {firebase.auth().currentUser.emailVerified ? navigation.navigate('Home') : navigation.navigate('StartScreen')})
    .catch(error => console.log(error))
         
  } 

import React，{useState}来自“React”；
从“react native”导入{样式表、文本、视图}；
从“本机库”导入{容器、表单、输入、项、按钮、标签}；
从“firebase”导入*作为firebase；
const LoginForm=（{navigation}）=>{
const[email，setEmail]=useState（“”）；
const[password，setPassword]=useState（“”）；
const addEmail=（电子邮件）=>{
设置电子邮件（电子邮件）
}
const addPassword=（密码）=>{
设置密码（密码）
}
返回(
电子邮件
addEmail（电子邮件）}
/>
密码
addPassword（密码）}
/>
handleLogin（电子邮件、密码、导航）}
>
登录
);
};
导出默认登录信息；
const handleLogin=（电子邮件、密码、导航）=>{
console.log（电子邮件、密码）
firebase.auth（）
.signInWithEmailAndPassword（email.trim（），password）
.then（（）=>{firebase.auth（）.currentUser.emailVerified？navigation.navigate（'Home'）：navigation.navigate（'StartScreen'）}）
.catch（错误=>console.log（错误））
} 

我在App.js中创建了一个堆栈导航器

const bottomTabNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          <Ionicons  name="ios-home" size={25} color={tintColor}/>
          // <Icon name="qrcode" size={25} color={tintColor} />
        )
      }
    },
    Profile: {
      screen: Profile,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          // <Icon name="search" size={25} color={tintColor} />
          <Ionicons  name="md-person" size={25} color={tintColor}/>
        )
      }
    },


  },
  {
    initialRouteName: 'Home',
    tabBarOptions: {
      activeTintColor: '#eb6e3d'
    }
  }
);






const RootSwitch = createSwitchNavigator({ 
  StartScreen,
  Signup,
  Login,
  bottomTabNavigator
  });

const AppContainer = createAppContainer(RootSwitch);

const bottomTabNavigator=createBottomTabNavigator(
{
主页：{
屏幕：主页，
导航选项：{
tabBarIcon:（{tintColor}）=>(
// 
)
}
},
简介：{
屏幕：配置文件，
导航选项：{
tabBarIcon:（{tintColor}）=>(
// 
)
}
},
},
{
initialRouteName:“主页”，
选项卡选项：{
activeTintColor:“#eb6e3d”
}
}
);
const RootSwitch=createSwitchNavigator（{
StartScreen，
报名，
登录，
底部选项卡导航器
});
const-AppContainer=createAppContainer（RootSwitch）；

尝试使用钩子，如下所示：

//添加此导入
从“React”导入React，{useCallback}；
//将函数更改为回调函数
const handleLogin=useCallback（异步（电子邮件、密码、导航）=>{
console.log（电子邮件、密码）
等待firebase.auth（）
.signInWithEmailAndPassword（email.trim（），password）
.then（（）=>{firebase.auth（）.currentUser.emailVerified？navigation.navigate（'Home'）：navigation.navigate（'StartScreen'）}）
.catch（错误=>console.log（错误））
}, []);

您是否正在创建stackNavigator？路由文件。我将CreateBoottomNavigator与react导航组件结合使用。您可以使用

navigation.navigate（'StartScreen'）

，但您的屏幕名称是

Profile

。正确验证后，导航路由为

主页

。这里的错误是在访问导航时发生的。此设置与类组件完美配合。您能显示错误吗？