navigation.navigate(screenName) 在 React Native 中不起作用

Question

App.js

import React, { Component } from 'react';
import { View } from 'react-native';
import Route from './app/components/Navigation/Route';
import FlashMessage from "react-native-flash-message";

// create a component
const App = () => {
    return (
      <View style={{flex:1}}>
        <Route/>
        <FlashMessage position="top" />
      </View>
    );
};



//make this component available to the app
export default App;

Route.js

import React, { Component, useEffect, useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import 'react-native-gesture-handler';
import AsyncStorage from '@react-native-async-storage/async-storage';;

import Authstack from './Authstack';
import AppStack from './Appstack';

function Route() {

  const [token, setToken] = useState('');

  useEffect(()=>{
    loadApp()
  },[]);

  loadApp = async()=>{
    const loggedToken =  await AsyncStorage.getItem('userToken');
    setToken(loggedToken);
  }


    return (
      <NavigationContainer>
        { (token ? <AppStack/> : <Authstack/>)}
      </NavigationContainer>
    );
  }

  export default Route;

  

Authstack.js

import React from 'react';
import 'react-native-gesture-handler';
import Icon from 'react-native-vector-icons/Ionicons';
// import Authstack from './Authstack';

import {createNativeStackNavigator} from '@react-navigation/native-stack';


import {Login, Profile} from '..';
import AppStack from  './Appstack';


export default function Authstack(){
    const Stack = createNativeStackNavigator();
    return(
        <Stack.Navigator initialRouteName='Login'>
            <Stack.Screen name="Login" component={Login} options={{ title: 'Login' ,headerStyle: { backgroundColor: '#b61b1b', },
                headerTintColor: 'white',headerTitleStyle: {fontWeight: 'bold',},}} />
            <Stack.Screen name="AppStack" component={AppStack} options={{ header: false }}/>
        </Stack.Navigator>
        
    );
}

Appstack.js

import React from 'react';
import Icon from 'react-native-vector-icons/Ionicons';
import { createDrawerNavigator } from '@react-navigation/drawer';

import SidebarMenu from  './SidebarMenu';


import {Profile, Salary, Attendance, Insurance, Leave, Loan,Logout,Sidebar} from '..';

export default function AppStack(){
const Drawer = createDrawerNavigator();

  const loadIcon =(name)=>{
    return <Icon name={name} size={20} color='#b61b1b'/>
  }

    return(
          <Drawer.Navigator screenOptions={{headerStyle: {
            backgroundColor: '#b61b1b', },headerTintColor: '#fff',headerTitleStyle: {fontWeight: 'bold' },}}
            drawerContentOptions={{activeTintColor: '#e91e63',itemStyle: { marginVertical: 5 }, }} 
            drawerContent={(props)=> <SidebarMenu {...props} /> }>
            <Drawer.Screen name="Profile" component={Profile} options={{drawerIcon: () => (loadIcon('person-circle-outline')),}} />
            <Drawer.Screen name="Attendance" component={Attendance} options={{drawerIcon: () => (loadIcon('alarm-outline')),}} />
            <Drawer.Screen name="Salary" component={Salary} options={{drawerIcon: () => (loadIcon('cash-outline')),}} />
            <Drawer.Screen name="Leave" component={Leave} options={{drawerIcon: () => (loadIcon('calendar-outline')),}} />
            <Drawer.Screen name="Loan" component={Loan} options={{drawerIcon: () => (loadIcon('business-outline')),}} />
            <Drawer.Screen name="Logout" component={Logout} options={{drawerIcon: () => (loadIcon('exit-outline')),}} />
          </Drawer.Navigator>
        
    );
}

Logout.js

从 'react-native' 导入 { View, Text, Button } 从“反应”导入反应

const 注销 = ({导航}) => { 返回 （ 登出 navigation.navigate('Authstack',{screen:'登录'})} /> ） }

导出默认注销

当我单击“注销”按钮页面时不执行任何操作。我正在尝试从抽屉导航器注销屏幕导航到堆栈导航器中 Authstak 中的登录页面，但无法正常工作。如何解决这个问题。

我正在尝试从抽屉导航器注销屏幕导航到堆栈导航器中 Authstak 中的登录页面，但不起作用。

您正在根据用户是否登录有条件地渲染 AppStack 和 AuthStack：

{ (token ? <AppStack/> : <Authstack/>)}

在 AuthStack 中，您再次包含了 AppStack，但不是相反（因此当您登录时，AuthStack 不存在！）。然而，这是不好的做法，我建议您将两个堆栈（AppStack 和 AuthStack）添加到根堆栈（例如 stackNavigator）中。然后可以根据用户的状态设置初始路由（当token未定义时，打开AuthStack，否则打开AppStack）。那么您不必将AppStack嵌入到AuthStack中，并且您应该能够在注销时打开AuthStack。一个例子是：

import React, { Component, useEffect, useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import 'react-native-gesture-handler';
import AsyncStorage from '@react-native-async-storage/async-storage';;

import Authstack from './Authstack';
import AppStack from './Appstack';
const Stack = createNativeStackNavigator();

function Route() {
  const handleNavigationRef = (node) => {
        if (node === null) {
            return;
        }
        AsyncStorage.getItem('userToken').then(value => {
            if (value) {
                return;
            }
            node.navigate("auth");
        });
    };


    return (
      <NavigationContainer ref={handleNavigationRef}>
          <Stack.Navigator>
              <Stack.Screen name="app" component={AppStack} />
              <Stack.Screen name="auth" component={AuthStack} />
          </Stack.Navigator>
      </NavigationContainer>
    );
  }

  export default Route;

Answer 1

您正在根据用户是否登录有条件地渲染 AppStack 和 AuthStack：

{ (token ? <AppStack/> : <Authstack/>)}

在 AuthStack 中，您再次包含了 AppStack，但不是相反（因此当您登录时，AuthStack 不存在！）。然而，这是不好的做法，我建议您将两个堆栈（AppStack 和 AuthStack）添加到根堆栈（例如 stackNavigator）中。然后可以根据用户的状态设置初始路由（当token未定义时，打开AuthStack，否则打开AppStack）。那么您不必将AppStack嵌入到AuthStack中，并且您应该能够在注销时打开AuthStack。一个例子是：

import React, { Component, useEffect, useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import 'react-native-gesture-handler';
import AsyncStorage from '@react-native-async-storage/async-storage';;

import Authstack from './Authstack';
import AppStack from './Appstack';
const Stack = createNativeStackNavigator();

function Route() {
  const handleNavigationRef = (node) => {
        if (node === null) {
            return;
        }
        AsyncStorage.getItem('userToken').then(value => {
            if (value) {
                return;
            }
            node.navigate("auth");
        });
    };


    return (
      <NavigationContainer ref={handleNavigationRef}>
          <Stack.Navigator>
              <Stack.Screen name="app" component={AppStack} />
              <Stack.Screen name="auth" component={AuthStack} />
          </Stack.Navigator>
      </NavigationContainer>
    );
  }

  export default Route;