TypeError: undefined не является объектом (оценка'Object.keys (routeConfigs) ')

Question

import React from 'react';
import {createAppContainer} from 'react-navigation';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import {createStackNavigator} from 'react-navigation-stack';
import { NavigationContainer } from '@react-navigation/native';
import Welcomepage from './Components/Rootstack/Welcomecomponent';
import Signpage from './Components/Rootstack/Signincomponent';
import Signuppage from './Components/Rootstack/SignupComponent';
import Whoyouare from './Components/Rootstack/selectfacstu';
import homescreen from './Components/Homestack/homescreen';
import ChatTab from './Components/Homestack/chatscreen';
import Blogpage from './Components/Rootstack/feedscreen';
import Settings from './Components/Homestack/settings';
import notifications from './Components/Homestack/Notification';
import profile from './Components/Homestack/profile';
import { Root } from "native-base";

const Stack = createStackNavigator();

function Rootstack() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="welcome">
        <Stack.Screen name="login" component={Signpage} />
        <Stack.Screen name="signup" component={Signuppage} /> 
        <Stack.Screen name="welcome" component={Welcomepage} /> 
        <Stack.Screen name="who" component={Whoyouare} /> 
        <Stack.Screen name="home" component={Homestack} /> 
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const Tab = createMaterialBottomTabNavigator();

function Homestack(){
  return(
    <Tab.Navigator
    initialRouteName="Home"
    activeColor="yellow"
    barStyle={{ backgroundColor: '#0E043B' }}
    >
    <Tab.Screen
      name="Home"
      component={homescreen}
      options={{
        tabBarLabel: 'Home',
        tabBarIcon: ({ color }) => (
          <MaterialCommunityIcons name="pentagon-outline" color={color} size={26} />
        ),
      }}
    />
    <Tab.Screen
      name="Feed"
      component={Blogpage}
      options={{
        tabBarLabel: 'Feed',
        tabBarIcon: ({ color }) => (
          <MaterialCommunityIcons name="menu" color={color} size={26} />
        ),
      }}
    />
                       <Tab.Screen
      name="write"
      component={notifications}
      options={{
        tabBarLabel: 'bell',
        tabBarIcon: ({ color }) => (
          <FontAwesome5 name="bell" color={color} size={26} />
        ),
      }}
    />
                       <Tab.Screen
      name="chat"
      component={ChatTab}
      options={{
        tabBarLabel: 'chat',
        tabBarIcon: ({ color }) => (
          <MaterialIcons name="chat" color={color} size={26} />
        ),
      }}
    />
   <Tab.Screen
      name="profile"
      component={profile}
      options={{
        tabBarLabel: 'Profile',
        tabBarIcon: ({ color }) => (
          <MaterialCommunityIcons name="account" color={color} size={26} />
        ),
      }}
    />
             <Tab.Screen
      name="settings"
      component={Settings}
      options={{
        tabBarLabel: 'settings',
        tabBarIcon: ({ color }) => (
          <MaterialCommunityIcons name="settings" color={color} size={26} />
        ),
      }}
    />


  </Tab.Navigator>
  );
}

export default class App extends Component {
  render() {
    return (
      <Root>
        <Rootstack />
      </Root>
    );
  }
}


//below code is about installed dependency version

Получив эту ошибку, в консоли / терминале ошибки нет, но когда я запускаю это в expo (Android), он отрицает ошибку, я упоминал, чтобы отреагировать раздел документации сайта навигации, и я проверил все возможные ответы, и я не могу исправить эту проблему, и такой же тип примера был эффективен и успешно реализован моим другом-разработчиком, и я удалил этот навигатор вкладок раздел и проверил с наименьшим количеством примеров, и я получил ту же ошибку.

Как я могу исправить эту проблему?

Answer 1

Я исправил эту проблему, изменив оператор импорта стека навигации по реакции, который относился к недопустимой / более старой версии. import {createStackNavigator} from '' @ response-navigation / stack "; правильный ли

Answer 2

Похоже, что import { Root } from "native-base"; вызывает проблему.

Ниже приведен фрагмент кода, который я реализовал и работает нормально:

Приложение. js:

import React from 'react';
import MainStackNavigator from './src/MainStackNavigator';
export default class App extends React.Component {
  render() {
    return <MainStackNavigator />;
  }
}

MainStackNavigator. js

import * as React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import MainTabNavigator from './MainTabNavigator';
import CreateGame from './CreateGame';
import {NavigationContainer} from '@react-navigation/native';

const Stack = createStackNavigator();

function MainStackNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}
        initialRouteName="MainTabNavigator">
        <Stack.Screen name="MainTabNavigator" component={MainTabNavigator} />
        <Stack.Screen name="CreateGame" component={CreateGame} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default MainStackNavigator;

MainTabNavigator. js

import React from 'react';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
import Icon from 'react-native-vector-icons/Ionicons';
import Home from './Home';
import Profile from './Profile';
import Dashboard from './Dashboard';
const Tab = createMaterialBottomTabNavigator();

export default function MainTabNavigator() {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      //activeColor="#e91e63"
      barStyle={{backgroundColor: '#ffffff'}}
      labelStyle={{fontSize: 12}}>
      <Tab.Screen
        name="Home"
        component={Home}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: () => <Icon name="ios-home" color="#03C8A8" size={26} />,
        }}
      />
      <Tab.Screen
        name="Dashboard"
        component={Dashboard}
        options={{
          tabBarLabel: 'Dashboard',
          tabBarIcon: () => (
            <Icon name="stats-chart-sharp" color="#03C8A8" size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Profile"
        component={Profile}
        options={{
          tabBarLabel: 'Profile',
          tabBarIcon: () => (
            <Icon name="ios-person" color="#03C8A8" size={26} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}