React Native 导航：处理“NAVIGATE”操作错误，“主”屏幕未由任何导航器处理

Question

我的 React Native 项目中的问题是，在我的 login.jsx 组件中，当用户单击“登录”按钮时，我遇到以下错误： > 错误 任何导航器均未处理有效负载 {"name":"Home"} 的操作“NAVIGATE”。 您有一个名为“主页”的屏幕吗？

我已经彻底检查了我的登录组件，里面的一切似乎都是正确的。问题似乎出在 App.js 文件或 Home.jsx 组件中。但是，我不知道如何解决这个错误。

即使我在 Home.jsx 组件中并单击 LogOut 按钮，我仍然遇到此错误，但它提到了 {"name":"Login"}。

在 App.js 中：

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { StatusBar, StyleSheet, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { useEffect, useState } from 'react';
import Login from './screens/Login&Register/Login';
import Home from './screens/Home/Home';

const HomeNav = () => {
    const Stack = createNativeStackNavigator();
    return (
        <Stack.Navigator screenOptions={{ headerShown: false }}>
            <Stack.Screen name="Home" component={Home} />
        </Stack.Navigator>
    );
};
const LoginNav = () => {
    const Stack = createNativeStackNavigator();
    return (
        <Stack.Navigator screenOptions={{ headerShown: false }}>
            <Stack.Screen name="Login" component={Login} />
        </Stack.Navigator>
    );
};

export default function App() {
    const [isLoggedIn, setIsLoggedIn] = useState(false);
    async function getData() {
        const data = await AsyncStorage.getItem('isLoggedIn');
        console.log(data, 'at app.js');
        setIsLoggedIn(data);
    }
    useEffect(() => {
        getData();
        setTimeout(() => {
        }, 900);
    }, [isLoggedIn]);

    return (
        <View style={styles.container}>
            <StatusBar hidden={true} />
            <NavigationContainer>
                {isLoggedIn ? <HomeNav /> : <LoginNav />}
            </NavigationContainer>
        </View>
    );
}

这是我的 Home.jsx 代码：

import React, { useState, useEffect } from 'react';
import { View, Text, Button, ScrollView } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useNavigation } from '@react-navigation/native';

function Home() {
    const navigation = useNavigation();

    function logOut() {
        AsyncStorage.setItem('isLoggedIn', '');
        AsyncStorage.setItem('token', '');
        navigation.navigate('Login');
    }

    return (
        <ScrollView>
            <View
                style={{
                    flex: 1,
                    justifyContent: 'center',
                    alignItems: 'center',
                }}
            >
                <Text>Welcome to Home</Text>
                <Button title="Logout" onPress={() => logOut()} />
            </View>
        </ScrollView>
    );
}

export default Home;

请帮助我，我已经尝试解决这个问题 5 天了。

Answer 1

您无法在此处导航，因为主页和登录导航器并未始终安装。根据您编写的代码库，您的应用程序中只能有一个导航器。

为此，您需要更新状态以有条件地更改导航器，例如

isLoggedIn

状态。

为此你可以引入redux或者context api来完成这个需求。

查找两者的官方文档如下：

1. Redux 工具包

2. React 上下文 API