React Native页面跳转报错，需实现从HomeScreen跳转至AuditScreen

错误信息 #

The action 'NAVIGATE' with payload {"name":"LoginScreen"} was not handled by any navigator.
Do you have a screen named 'LoginScreen'?
If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.

现有代码 #

App.js #

import { StatusBar } from 'expo-status-bar';
import React from 'react'
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import  LoginScreen  from './screens/LoginScreen'
import  HomeScreen  from './screens/HomeScreen'


const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen options={{headerShown: false}} name="Login" component={LoginScreen} />
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

HomeScreen.js #

import { StackActions, useNavigation } from '@react-navigation/core'
import React from 'react'
import { StyleSheet, Text, TouchableOpacity, View, Button, SafeAreaView } from 'react-native'
import { auth } from '../firebase'
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import AuditScreen from './AuditScreen';
import ReportAuditScreen from './ReportAuditScreen';
import LoginScreen from './LoginScreen';



const HomeScreen = () => {

  const navigation = useNavigation()
  const Stack = createNativeStackNavigator()
  const handleSignOut = () => {
    auth
    .signOut()
    .then(() => {
      navigation.replace("Login")
    })
    .catch(error => alert(error.message))
  }

  

  return (
    <SafeAreaView>
      <View>
        <Text>Siema Home</Text>
        <Button title="Out" onPress={handleSignOut}/>
        <Button title="Audit" onPress={() => navigation.navigate("AuditScreen")}/>
      </View>
    </SafeAreaView>
  )
}

需求 #

点击Audit按钮跳转至AuditScreen页面，同时解决上述导航报错问题。

1. 修复导航报错 #

错误提示找不到LoginScreen，是因为你的代码里可能存在跳转到LoginScreen的逻辑，但App.js中注册的登录页面名称是Login。检查LoginScreen内的跳转代码，将所有navigation.navigate("LoginScreen")或navigation.replace("LoginScreen")改为navigation.replace("Login")即可。

2. 实现AuditScreen跳转 #

当前根导航栈未注册AuditScreen，提供两种实现方式：

方式一：在根Stack中直接添加AuditScreen #

修改App.js，导入并注册AuditScreen：

import { StatusBar } from 'expo-status-bar';
import React from 'react'
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginScreen from './screens/LoginScreen'
import HomeScreen from './screens/HomeScreen'
import AuditScreen from './screens/AuditScreen'; // 新增导入

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen options={{headerShown: false}} name="Login" component={LoginScreen} />
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="AuditScreen" component={AuditScreen} /> // 新增屏幕注册
      </Stack.Navigator>
    </NavigationContainer>
  );
}

修改后，HomeScreen中的navigation.navigate("AuditScreen")即可正常跳转。

方式二：在HomeScreen中嵌套导航 #

如果AuditScreen属于Home的子页面，可采用嵌套导航结构：
修改HomeScreen.js：

import { useNavigation } from '@react-navigation/core'
import React from 'react'
import { SafeAreaView, Text, Button, View } from 'react-native'
import { auth } from '../firebase'
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import AuditScreen from './AuditScreen';

const HomeStack = createNativeStackNavigator();

// 嵌套的导航容器
const HomeStackScreen = () => {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="HomeMain" component={HomeMainScreen} />
      <HomeStack.Screen name="AuditScreen" component={AuditScreen} />
    </HomeStack.Navigator>
  );
};

// 原HomeScreen内容抽离为子组件
const HomeMainScreen = () => {
  const navigation = useNavigation();

  const handleSignOut = () => {
    auth
      .signOut()
      .then(() => {
        navigation.replace("Login")
      })
      .catch(error => alert(error.message))
  };

  return (
    <SafeAreaView>
      <View>
        <Text>Siema Home</Text>
        <Button title="Out" onPress={handleSignOut}/>
        <Button title="Audit" onPress={() => navigation.navigate("AuditScreen")}/>
      </View>
    </SafeAreaView>
  );
};

export default HomeStackScreen;

App.js无需修改，点击Audit按钮即可跳转到嵌套的AuditScreen页面。

3. 清理冗余代码 #

删除HomeScreen.js中多余的导入：NavigationContainer、LoginScreen，避免无效资源加载。

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