我做错了什么（导航器）？

Question

我正在尝试创建一个有两个屏幕的导航器。其中一个有另一个导航器。我收到此错误：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named inports. Check the render methon of 'Navigation'.

我的代码：

import * as React from 'react';
import { NavigationContainer, StackActions } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';

// Screens
import Primary from './Screens/Primary';
import Secondary from './Screens/Secondary';
import Map_map from './Screens/Map_map';
import { createStackNavigator } from '@react-navigation/stack';

// Locations
const mesta = [
  {
    name: 'Praha', 
    coordinates: {
      latitude: 50.072829,
      longitude: 14.433817 
  }},
  , 
  {
    name: 'České Budějovice',
    coordinates: {
      latitude: 48.975250,
      longitude: 14.479161
}},
]

//Screen names
export const screenNames = {
  mapa: "Mapa", //home
  lokace: "Lokace",  //details
  mapaDet: "Map_map",  //innerDetails
  mapaStack: "MapaStackScreen", //homeStack
  lokaceStack: "LokaceStackScreen",  //detailsStack
};


const MapaStack = createStackNavigator();

function MapaStackScreen() {
  return (
      <MapaStack.Navigator
        initialRouteName={screenNames.mapa}
        >
        <MapaStack.Screen name={screenNames.mapa} children={() => <Secondary towns={mesta}/>}/>
      </MapaStack.Navigator>
  );
}

const LokaceStack = createStackNavigator();

function LokaceStackScreen({ navigation, route }){
  const tabHiddenRoutes = ["Map_map"];
  useEffect(() => {
    if (tabHiddenRoutes.includes(getFocusedRouteNameFromRoute(route))) {
      navigation.setOptions({ tabBarVisible: false });
    } else {
      navigation.setOptions({ tabBarVisible: true });
    }

  }, [navigation, route]);
  return(
      <LokaceStack.Navigator initialRouteName={screenNames.lokace}>
        <LokaceStack.Screen name={screenNames.lokace} children={() => <Primary towns={mesta}/>}/>
        <LokaceStack.Screen name={screenNames.mapaDet} component={Map_map}/>
      </LokaceStack.Navigator>
  )
}


const Tab = createBottomTabNavigator

export default function Navigation()
{
  return(
    <Tab.Navigator
    initialRouteName={screenNames.mapaStack}
    tabBarOptions={{
      activeTintColor: '#007aff',
      inactiveTintColor: 'grey',
      labelStyle: { paddingBottom: 10, fontSize: 10 },
      style: { padding: 10, height: 70}
    }}
    >
      <Tab.Screen
        name={screenNames.mapaStack}
        component={MapaStackScreen}
        options={{
          tabBarLabel: "",
          tabBarIcon: ({ color, focused }) => (
            <Icon
              name={focused ? 'map' : 'map-outline'}
              size="24"
              color={color}
            />
          ),
        }}
      />
      <Tab.Screen
        name={screenNames.LokaceStackScreen}
        component={LokaceStackScreen}
        options={{
          tabBarLabel: "",
          tabBarIcon: ({ color, focused }) => (
            <Icon
              name={focused ? 'home' : 'home-outline'}
              size="24"
              color={color}
            />
          ),
        }}
      />
    </Tab.Navigator>
  )
}

Answer 1

我找到了我的答案：

const Tab = createBottomTabNavigator

应该是：

const Tab = createBottomTabNavigator();

我做错了什么（导航器）？

What am I doing wrong (Navigator)?

react-native

react-navigation