React Native导航异常：页面仅能切换一次后无法再次跳转

核心问题分析 #

你的导航异常是因为函数组件中错误使用了类组件的方法定义方式，以及错误传递this导致navigation上下文丢失：

1. LoginSceen和SignupScreeen是函数组件，不能用类组件的handleClick = () => {}写法，这种方式会导致函数无法正确捕获组件内的navigation变量。
2. onPress={() => handleClick(this)}中传递this完全错误，函数组件没有this对象，这会导致调用handleClick时内部的navigation指向混乱。

修复步骤 #

1. 修正函数组件的方法定义

将handleClick改为函数组件内的常量函数：

const handleClick = () => {
  ToastAndroid.show("Clicked!", ToastAndroid.SHORT);
  navigation.navigate("SignUp");
}

2. 修正onPress回调调用

去掉多余的this传递，直接调用handleClick：

<Text style={styles.link1} onPress={handleClick}>Create One.</Text>

3. 移除冗余的navigation props

MainSceen作为包裹NavigationContainer的根组件，不需要接收navigation props，改为：

const MainSceen = () => {
  // ... 原有代码
}

完整修复后的代码片段 #

import React from 'react';
import { Text, View, StyleSheet, TextInput, Button, ToastAndroid } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import { initializeApp } from "firebase/app";
import { getDatabase, ref, set } from "firebase/database";
const Stack = createNativeStackNavigator();
const firebaseConfig = {
  // 你的配置信息
};
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);

ToastAndroid.show("app started", ToastAndroid.SHORT);

const MainSceen = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Login"
          component={LoginSceen}
          options={{ title: 'Login' }}
        />
        <Stack.Screen
          name="SignUp"
          component={SignupScreeen}
          options={{ title: 'SignUp' }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

const LoginSceen = ({ navigation }) => {
  const handleClick = () => {
    ToastAndroid.show("Clicked!", ToastAndroid.SHORT);
    navigation.navigate("SignUp")
  }
  return (
    <View>
      <Text style={styles.title1}>LogIn</Text>
      <Text style={styles.text2}>Username</Text>
      <TextInput style={styles.input} placeholder="John" />
      <Text style={styles.text3}>Password</Text>
      <TextInput style={styles.input} placeholder="********" />
      <Text style={styles.text4}>You dont have an account yet? <Text style={styles.link1} onPress={handleClick} >Create One.</Text> </Text>
      <View style={styles.button1}>
        <Button style={styles.button2} title="LogIn"     />
      </View>
    </View>
  )
}

const SignupScreeen = ({ navigation }) => {
  const handleClick = () => {
    ToastAndroid.show("Clicked!", ToastAndroid.SHORT);
    navigation.navigate("Login")
  }
  return (
    <View>
      <Text style={styles.title1}>SignUp</Text>
      <Text style={styles.text2}>Username</Text>
      <TextInput style={styles.input} placeholder="John" />
      <Text style={styles.text3}>Password</Text>
      <TextInput style={styles.input} placeholder="********" />
      <Text style={styles.text4}>You alrady have an account? <Text onPress={handleClick} style={styles.link1} >Login.</Text> </Text>
      <View style={styles.button1}>
        <Button style={styles.button2} title="LogIn"     />
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  // 你的样式定义
});

export default MainSceen;

补充说明 #

• 你已经正确导入了所有必需的导航库（@react-navigation/native和@react-navigation/native-stack），不需要额外导入其他库。
• 首次跳转正常是因为初始渲染时函数的上下文还未完全混乱，后续跳转时错误的this传递导致navigation无法正确触发页面切换。

内容的提问来源于stack exchange，提问作者Svit SP2009