React Native 中的导航问题：“任何导航器均未处理 NAVIGATE 操作

Question

我在使用 React Navigation 的 React Native 应用程序中遇到导航问题。当尝试导航到嵌套导航器中的屏幕时，我收到以下错误：

ERROR The action 'NAVIGATE' with payload {"name":"ExploreStack","params":{"screen":"Roaster"}} was not handled by any navigator. Do you have a screen named 'ExploreStack'?

我正在使用以下库：

• @react-navigation/native

  ：“^6.0.0”

• @react-navigation/bottom-tabs

  ：“^6.0.0”

• @react-navigation/stack

  ：“^6.0.0”

• react-native-vector-icons

  ：“^8.0.0”

这是我当前的设置：

ExploreScreen.js

：

import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';

const ExploreScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.item} onPress={() => navigation.navigate('ScreenTimeTracking')}>
        <Ionicons name="time" size={24} color="#000" />
        <Text style={styles.text}>Screen Time Tracking</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.item} onPress={() => navigation.navigate('ApplicationProcess')}>
        <Ionicons name="apps" size={24} color="#000" />
        <Text style={styles.text}>Application Process</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.item} onPress={() => navigation.navigate('Bookings')}>
        <Ionicons name="book" size={24} color="#000" />
        <Text style={styles.text}>Bookings</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.item} onPress={() => navigation.navigate('Roaster')}>
        <Ionicons name="calendar" size={24} color="#000" />
        <Text style={styles.text}>Roaster</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.item} onPress={() => navigation.navigate('DigitalPersonalFileLite')}>
        <Ionicons name="folder-open" size={24} color="#000" />
        <Text style={styles.text}>Digital Personal File Lite</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.item} onPress={() => navigation.navigate('ELearning')}>
        <Ionicons name="school" size={24} color="#000" />
        <Text style={styles.text}>E-learning</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.item} onPress={() => navigation.navigate('Imprint')}>
        <Ionicons name="information-circle-outline" size={24} color="#000" />
        <Text style={styles.text}>Imprint</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
  },
  item: {
    width: '90%',
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    marginVertical: 8,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
  },
  text: {
    marginLeft: 16,
    fontSize: 16,
    flex: 1,
  },
});

export default ExploreScreen;

AppNavigator.js

：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import Ionicons from 'react-native-vector-icons/Ionicons';

// Import screens
import DashboardScreen from '../screens/DashboardScreen';
import ExploreScreen from '../screens/ExploreScreen';
import ScreenTimeTrackingScreen from '../screens/ScreenTimeTrackingScreen';
import ApplicationProcessScreen from '../screens/ApplicationProcessScreen';
import BookingsScreen from '../screens/BookingsScreen';
import RoasterScreen from '../screens/RoasterScreen';
import DigitalPersonalFileLiteScreen from '../screens/DigitalPersonalFileLiteScreen';
import ELearningScreen from '../screens/ELearningScreen';
import ImprintScreen from '../screens/ImprintScreen';
import SettingsScreen from '../screens/SettingsScreen';

const Tab = createBottomTabNavigator();
const ExploreStack = createStackNavigator();

const ExploreStackScreen = () => (
  <ExploreStack.Navigator>
    <ExploreStack.Screen name="Explore" component={ExploreScreen} />
    <ExploreStack.Screen name="ScreenTimeTracking" component={ScreenTimeTrackingScreen} />
    <ExploreStack.Screen name="ApplicationProcess" component={ApplicationProcessScreen} />
    <ExploreStack.Screen name="Bookings" component={BookingsScreen} />
    <ExploreStack.Screen name="Roaster" component={RoasterScreen} />
    <ExploreStack.Screen name="DigitalPersonalFileLite" component={DigitalPersonalFileLiteScreen} />
    <ExploreStack.Screen name="ELearning" component={ELearningScreen} />
    <ExploreStack.Screen name="Imprint" component={ImprintScreen} />
  </ExploreStack.Navigator>
);

const AppNavigator = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ color, size }) => {
            let iconName;

            if (route.name === 'Dashboard') {
              iconName = 'ios-home';
            } else if (route.name === 'Explore') {
              iconName = 'ios-search';
            } else if (route.name === 'Settings') {
              iconName = 'ios-settings';
            }

            return <Ionicons name={iconName} size={size} color={color} />;
          },
        })}
      >
        <Tab.Screen name="Dashboard" component={DashboardScreen} />
        <Tab.Screen name="Explore" component={ExploreStackScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default AppNavigator;

当我按下 ExploreScreen 中的任何按钮时，我希望导航到相应的屏幕（例如 ScreenTimeTracking、ApplicationProcess 等）。然而在 get

ERROR The action 'NAVIGATE' with payload {"name":"ExploreStack","params":{"screen":"Roaster"}} was not handled by any navigator. Do you have a screen named 'ExploreStack'?

但是屏幕没有变化。我相信导航器没有正确处理导航。任何解决此问题的帮助将不胜感激。

Answer 1

当您处于选项卡导航器屏幕之一时，导航道具只能访问选项卡导航器中的屏幕，即“仪表板”、“探索”和“设置”。 当我在一个项目中使用抽屉导航时，我遇到了同样的问题，然后我在反应导航中找到了操作。 在你的情况下，你可以使用这样的东西

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

navigation.dispatch(StackActions.replace('ScreenTimeTracking'));

作为参考，您可以查看https://reactnavigation.org/docs/stack-actions