React Native报错：navigation.navigate不是函数，如何修复登录跳转？

出现navigation.navigate is undefined的核心原因是当前组件没有获取到有效的navigation对象，以下是几种针对性的修复方案：

方案1：从组件props中解构navigation #

如果你的登录页面是直接注册在导航栈中的屏幕组件，直接从组件的props中解构navigation即可：

import { View, TextInput, Button } from 'react-native';
import { useState } from 'react';
import { auth } from './firebaseConfig'; // 替换为你的firebase配置文件路径

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

  const handleLogin = () => {
    auth
      .signInWithEmailAndPassword(email, password)
      .then((userCredentials) => {
        const user = userCredentials.user;
        console.log("Logged in with:", user.email);
        navigation.navigate("Home");
      })
      .catch((error) => alert(error.message));
  };

  return (
    <View>
      <TextInput
        placeholder="邮箱"
        value={email}
        onChangeText={setEmail}
      />
      <TextInput
        placeholder="密码"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      <Button onPress={handleLogin} title="登录" />
    </View>
  );
};

export default LoginScreen;

方案2：使用useNavigation钩子 #

如果你的登录逻辑所在组件不是直接的导航栈屏幕（比如是嵌套的子组件），或者不想依赖props传递，直接使用@react-navigation/native提供的useNavigation钩子获取导航对象：

import { View, TextInput, Button } from 'react-native';
import { useState } from 'react';
import { useNavigation } from '@react-navigation/native';
import { auth } from './firebaseConfig';

const LoginScreen = () => {
  const navigation = useNavigation(); // 获取navigation对象
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = () => {
    auth
      .signInWithEmailAndPassword(email, password)
      .then((userCredentials) => {
        const user = userCredentials.user;
        console.log("Logged in with:", user.email);
        navigation.navigate("Home");
      })
      .catch((error) => alert(error.message));
  };

  return (
    <View>
      {/* 输入框和按钮代码同上 */}
    </View>
  );
};

方案3：手动传递navigation到子组件 #

如果handleLogin定义在嵌套的子组件中，需要从父组件（导航栈屏幕）把navigation传递下去：

// 父组件 LoginScreen.js
import { View, TextInput } from 'react-native';
import { useState } from 'react';
import LoginButton from './LoginButton';

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

  return (
    <View>
      <TextInput
        placeholder="邮箱"
        value={email}
        onChangeText={setEmail}
      />
      <TextInput
        placeholder="密码"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      <LoginButton 
        navigation={navigation} 
        email={email} 
        password={password} 
      />
    </View>
  );
};

// 子组件 LoginButton.js
import { Button } from 'react-native';
import { auth } from './firebaseConfig';

const LoginButton = ({ navigation, email, password }) => {
  const handleLogin = () => {
    auth
      .signInWithEmailAndPassword(email, password)
      .then(() => {
        navigation.navigate("Home");
      })
      .catch((error) => alert(error.message));
  };

  return <Button onPress={handleLogin} title="登录" />;
};

额外检查：确认导航栈已注册Home屏幕 #

最后要确保你的导航配置中已经正确注册了Home页面，否则即使navigation有效也无法跳转：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import LoginScreen from './LoginScreen';
import HomeScreen from './HomeScreen';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Home" component={HomeScreen} /> {/* 必须存在这一行 */}
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

内容的提问来源于stack exchange，提问作者David Guri