任何导航器均未处理负载为 {"name":"ChatScreen"} 的操作 'NAVIGATE'。你有一个名为 'ChatScreen' 的屏幕吗？

Question

这是我的App.js，这是入口点。我收到错误消息 'NAVIGATE' with payload {"name":"ChatScreen"} was not handled by any navigator.

你有一个名为 'ChatScreen' 的屏幕吗？

如果您尝试导航到嵌套导航器中的屏幕，请参阅 https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator。

这是一个仅限开发的警告，不会在生产中显示。我在 screens 目录中有 ChatScreen

import react from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import MainTabScreen from './scr/components/MainTabScreen';
import { DrawerContent } from './scr/components/DrawerContent';


const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>

{/* screenOptions={{headerStyle:{
        backgroundColor: '#009387',
      },
      headerTintColor: '#fff',
      headerTitleStyle:{
        fontWeight: 'bold'
      } */}

<Drawer.Navigator drawerContent={props => <DrawerContent {...props} />}>

      
        <Drawer.Screen 
         options={{
          headerShown: false
        }}
        name='md' component={MainTabScreen} />
        
        {/* <Drawer.Screen name="Products" component={Products} /> */}
      </Drawer.Navigator>
     
    </NavigationContainer> 
  );
}

这是我的 MainTbScreen.js，其中包含导航


import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'
import Icon from 'react-native-vector-icons/Ionicons'
import HomeScreen from '../screens/Homescreen'
import Ministries from '../screens/Ministries'
import ProfileScreen from '../screens/ProfileScreen'

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


const HomeStack = createNativeStackNavigator();
const DetailsStack = createNativeStackNavigator();

const Tab = createMaterialBottomTabNavigator();

const MainTabScreen = () => (
    <Tab.Navigator
      initialRouteName="Home"
      activeColor="#fff"
    >
      <Tab.Screen
        name="Home"
        component={HomeStackScreen}
        options={{
          tabBarLabel: 'Home',
          tabBarColor: '#009387',
          tabBarIcon: ({ color }) => (
            <Icon name="home" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Notifications"
        component={DetailsStackScreen}
        options={{
          tabBarLabel: 'Chat',
          tabBarColor: '#1f65ff',
          tabBarIcon: ({ color }) => (
            <Icon name="Messagebox" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Chat"
        component={ChatScreen}
        options={{
          tabBarLabel: 'Profile',
          tabBarColor: '#694fad',
          tabBarIcon: ({ color }) => (
            <Icon name="person" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Profile"
        component={ProfileScreen}
        options={{
          tabBarLabel: 'Profile',
          tabBarColor: '#d02860',
          tabBarIcon: ({ color }) => (
            <Icon name="ios-aperture" color={color} size={26} />
          ),
        }}
      />
    </Tab.Navigator>
);

export default MainTabScreen;

const HomeStackScreen = ({navigation}) => (
<HomeStack.Navigator screenOptions={{
        headerStyle: {
        backgroundColor: '#009387',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
        fontWeight: 'bold'
        }
    }}>
        <HomeStack.Screen name="Home" component={HomeScreen} options={{
        title:'Overview',
        headerLeft: () => (
            <Icon.Button name="ios-menu" size={25} backgroundColor="#009387" onPress={() => navigation.openDrawer()}></Icon.Button>
        )
        }} />
</HomeStack.Navigator>
);

const DetailsStackScreen = ({navigation}) => (
<DetailsStack.Navigator screenOptions={{
        headerStyle: {
        backgroundColor: '#1f65ff',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
        fontWeight: 'bold'
        }
    }}>
        <DetailsStack.Screen name="Details" component={Ministries} options={{
        headerLeft: () => (
            <Icon.Button name="ios-menu" size={25} backgroundColor="#1f65ff" onPress={() => navigation.openDrawer()}></Icon.Button>
        )
        }} />
</DetailsStack.Navigator>
);

Answer 1

您正在使用 ChatScreen 进行导航，但这不是您在导航器 name prop 中的 Screen 中定义的名称。

要么，做

<Tab.Screen
        name="ChatScreen"
        component={ChatScreen}
        options={{
          tabBarLabel: 'Profile',
          tabBarColor: '#694fad',
          tabBarIcon: ({ color }) => (
            <Icon name="person" color={color} size={26} />
          ),
        }}
/>

或navigation.navigate("Chat")离开name="Chat"。

任何导航器均未处理负载为 {"name":"ChatScreen"} 的操作 'NAVIGATE'。你有一个名为 'ChatScreen' 的屏幕吗？

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

react-native