Reactjs React Native Navigation 5导入“；元素类型无效"；

几个月没有

react native

后，我可以解决一些简单的问题。 我正在导入导航组件，并始终获得：

错误：元素类型无效：应为字符串（对于内置 组件）或类/函数（用于复合组件），但得到： 未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入

检查

NavBottomBar

的渲染方法

此错误位于： 在EnsureSingleNavigator中（位于BaseNavigationContainer.tsx:390）

代码如下：

import React from 'react';

import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';

// SCREENS

import AddBook from '../screens/AddBook';
import BookArchive from '../screens/BookArchive';

// ICONS
import EvilIcons from 'react-native-vector-icons/EvilIcons';
import Ionicons from 'react-native-vector-icons/Ionicons';

const SearchIcon = () => {
  return <EvilIcons name="search" size={20} color="black" />;
};

const BookArchiveIcon = () => {
  return <Ionicons name="md-library-sharp" size={20} color="black" />;
};


const Stack = createStackNavigator();
const Tab = createMaterialBottomTabNavigator();

const NavTab = () => {
return(
  <Tab.Navigation>
    <Tab.Screen
      name="Add"
      component={AddBook}
      options={({route}) => ({
        tabBarColor: '#000',
        tabBarLabel: 'Add a Book',
        tabBarIcon: () => SearchIcon(),
      })}
    />
    <Tab.Screen
      name="Libray"
      component={BookArchive}
      options={({route}) => ({
        tabBarColor: '#000',
        tabBarLabel: 'Library',
        tabBarIcon: () => BookArchiveIcon(),
      })}
    />
  </Tab.Navigation>
)
};

const NavBottomBar = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="My Book Store"
          component={NavTab}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default NavBottomBar;

除了解决办法，我什么都试过了

有什么想法吗

---

谢谢

您忘记了导航选项卡中的返回组件

const NavTab = () => {
  return (
    <Tab.Navigation>
      <Tab.Screen
        name="Add"
        component={AddBook}
        options={({ route }) => ({
          tabBarColor: '#000',
          tabBarLabel: 'Add a Book',
          tabBarIcon: () => SearchIcon(),
        })}
      />
      <Tab.Screen
        name="Libray"
        component={BookArchive}
        options={({ route }) => ({
          tabBarColor: '#000',
          tabBarLabel: 'Library',
          tabBarIcon: () => BookArchiveIcon(),
        })}
      />
    </Tab.Navigation>
  );
};

const NavTab=（）=>{
返回(
({
tabBarColor:“#000”，
tabBarLabel:“添加一本书”，
tabBarIcon:（）=>SearchIcon（），
})}
/>
({
tabBarColor:“#000”，
tabBarLabel:“库”，
tabBarIcon:（）=>BookArchiveIcon（），
})}
/>
);
};

您忘记了NavTab中的返回组件

const NavTab = () => {
  return (
    <Tab.Navigation>
      <Tab.Screen
        name="Add"
        component={AddBook}
        options={({ route }) => ({
          tabBarColor: '#000',
          tabBarLabel: 'Add a Book',
          tabBarIcon: () => SearchIcon(),
        })}
      />
      <Tab.Screen
        name="Libray"
        component={BookArchive}
        options={({ route }) => ({
          tabBarColor: '#000',
          tabBarLabel: 'Library',
          tabBarIcon: () => BookArchiveIcon(),
        })}
      />
    </Tab.Navigation>
  );
};

const NavTab=（）=>{
返回(
({
tabBarColor:“#000”，
tabBarLabel:“添加一本书”，
tabBarIcon:（）=>SearchIcon（），
})}
/>
({
tabBarColor:“#000”，
tabBarLabel:“库”，
tabBarIcon:（）=>BookArchiveIcon（），
})}
/>
);
};

它是

选项卡导航器

，而不是

选项卡导航

不相关，但也应该将图标呈现为react元素，而不是将其作为函数调用

const NavTab=（）=>{
返回(
({
tabBarColor:“#000”，
tabBarLabel:“添加一本书”，
tabBarIcon:（）=>，
})}
/>
({
tabBarColor:“#000”，
tabBarLabel:“库”，
tabBarIcon:（）=>，
})}
/>
)
};

---

使用类似于TypeScript的东西可以消除此类错误。

它是

Tab.Navigator

，而不是

Tab.Navigation

不相关，但也应该将图标呈现为react元素，而不是将其作为函数调用

const NavTab=（）=>{
返回(
({
tabBarColor:“#000”，
tabBarLabel:“添加一本书”，
tabBarIcon:（）=>，
})}
/>
({
tabBarColor:“#000”，
tabBarLabel:“库”，
tabBarIcon:（）=>，
})}
/>
)
};

---

使用类似于TypeScript的东西可以消除此类错误。

谢谢！对。但这并不能改变它！还有其他想法吗？嗯，也许你可以再运行一次。你能在BaseNavigationContainer中显示你的代码吗。tsx:390well是导航的标准。不是我的谢谢！对。但这并不能改变它！还有其他想法吗？嗯，也许你可以再运行一次。你能在BaseNavigationContainer中显示你的代码吗。tsx:390well是导航的标准。不是我的谢谢但我已经找到了。你能解释一下打字机的工作原理吗？谢谢，但我已经找到了。你能解释一下typescript的工作原理吗？