Error: A navigator can only contain 'Screen' components as its direct children (found '[object Object]')

Question

我在使用 React Native 导航系统中的嵌套导航器时遇到了很多麻烦。由于项目需要，我最近将基于底部选项卡的导航系统升级为嵌套导航系统，其中多个堆栈导航器嵌套在底部选项卡导航器中。我的代码如下所示。

但是，我不断收到以下错误消息：Error: A navigator can only contain 'Screen' components as its direct children (found '[object Object]')。错误堆栈显示它发生在我的 Stack Navigators 中，特别是 MyFeed。我不确定我是否真的理解发生了什么，堆栈导航器的子项都是由上述函数定义的 'Screens'。

我尝试按照在线文档和其他示例项目进行操作，但没有成功。

有人能在这里发现我的错误吗？

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '@expo/vector-icons';

// Screen Imports
import FeedScreen from './screens/Feed/Feed'
import SearchScreen from './screens/Search/Search'
import PostScreen from './screens/Post'
// import NotificationScreen from './screens/Notification'
import ProfileScreen from './screens/Profile';

// Component Imports
import CommentsScreen from './screens/Feed/Comments';
import SearchGenreScreen from './screens/Search/SearchGenre';

// MAIN SCREEN LINKS:

// Link to Feed Screen
function Feed({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <FeedScreen />
    </View>
  );
}

// Link to Search Screen
function Search({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <SearchScreen />
    </View>
  );
}

// Link to Post Screen
function Post({ navigation }) {
  return (
    <View style={{ flex: 1 }}>
      <PostScreen />
    </View>
  );
}

// Link to Notificationns Screen
function Notifications({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Notifications!</Text>
    </View>
  );
}

// Link to Profile Screen
function Profile({ navigation }) {
  return (
    <View style={{ flex: 1 }}>
      <ProfileScreen />
    </View>
  );
}

// SECONDARY SCREEN LINKS:

// Link to Comments Screen
function Comments({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <CommentsScreen />
    </View>
  );
}

// Link to Search Genre Screen
function SearchGenre({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <SearchGenreScreen />
    </View>
  );
}

// Creates Stack Navigators
const FeedStack = createStackNavigator();
const SearchStack = createStackNavigator();
const PostStack = createStackNavigator();
const NotificationStack = createStackNavigator();
const ProfileStack = createStackNavigator();

// Renders Feed Navigator
function MyFeed({ navigation }) {
  return(
  <FeedStack.Navigator {...{initialRouteName: "Feed"}}>
    <FeedStack.Screen name="Feed" component={Feed} options={{headerShown: false}}/>
    <FeedScreen.Screen name="Comments" component={Comments} options={{headerShown: false}}/>
  </FeedStack.Navigator>
  )
}

// Renders Search Navigator
function MySearch({ navigation }) {
  return(
  <SearchStack.Navigator {...{initialRouteName: "Search"}}>
    <SearchStack.Screen name="Search" component={Search} options={{headerShown: false}}/>
    <SearchStack.Screen name="SearchGenre" component={SearchGenre} options={{headerShown: false}}/>
  </SearchStack.Navigator>
  )
}

// Renders Post Navigator
function MyPost({ navigation }) {
  return(
  <PostStack.Navigator {...{initialRouteName: "Post"}}>
    <PostStack.Screen name="Post" component={Post} options={{headerShown: false}}/>
  </PostStack.Navigator>
  )
}

// Renders Notification Navigator
function MyNotification({ navigation }) {
  return(
  <NotificationStack.Navigator {...{initialRouteName: "Notifications"}}>
    <NotificationStack.Screen name="Notifications" component={Notifications} options={{headerShown: false}}/>
  </NotificationStack.Navigator>
  )
}

// Renders Profile Navigator
function MyProfile({ navigation }) {
  return(
  <ProfileStack.Navigator {...{initialRouteName: "Profile"}}>
    <ProfileStack.Screen name="Profile" component={Profile} options={{headerShown: false}}/>
  </ProfileStack.Navigator>
  )
}

// Creates Navigation Bar
const Tab = createBottomTabNavigator();

// Renders Navigation Bar
function MyTabs() {
  return (
    <Tab.Navigator
      tabBarOptions={{
        activeTintColor: '#e91e63',
      }}
    >
      <Tab.Screen
        name="Feed"
        component={MyFeed}
        options={{
          tabBarLabel: 'Feed',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="newspaper" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Search"
        component={MySearch}
        options={{
          tabBarLabel: 'Search',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="magnify" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Post"
        component={MyPost}
        options={{
          tabBarLabel: 'Post',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="plus-box" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Notifications"
        component={MyNotification}
        options={{
          tabBarLabel: 'Notifications',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="bell" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Profile"
        component={MyProfile}
        options={{
          tabBarLabel: 'Profile',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="account-outline" color={color} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

// Renders Navigation System
export default function App() {
  return (
    <NavigationContainer>
      <MyTabs/>
    </NavigationContainer>
  );
}

Answer 1

您的 MyFeed 组件中有这个：

<FeedScreen.Screen name="Comments" component={Comments} options={{headerShown: false}}/>

应该是：

<FeedStack.Screen name="Comments" component={Comments} options={{headerShown: false}}/>

与问题无关：您可以在导航器的 screenOptions 属性中指定 headerShown 而不是在每个屏幕上指定，也可以写 [=16] 而不是 {...{initialRouteName: "Profile"}} =]