React Native Navigation 5 导入 "Element type invalid"

Question

几个月没有 react-native 我可以解决一些简单的问题。我正在导入导航组件，我总是得到：

Error: 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 imports.

Check the render method of NavBottomBar.

This error is located at: in EnsureSingleNavigator (at 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;

超级简单。这里是 App.js

中的导入

... // various components
import NavBottomBar from './src/components/NavBottomBar';

const App = () => {
  return (
    <>
      <Provider store={store}>
        <StatusBar barStyle="dark-content" />
        <SafeAreaView>
          <NavBottomBar />
          <AddBook />
        </SafeAreaView>
      </Provider>
    </>
  );
};

除了解决方案我什么都试过了！

有什么想法吗？

谢谢

Answer 1

您忘记了 NavTab 中的 return 组件

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>
  );
};

Answer 2

是Tab.Navigator，不是Tab.Navigation。

无关，但您还应该将图标呈现为反应元素，而不是将它们作为函数调用。

const NavTab = () => {
  return(
    <Tab.Navigator>
      <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.Navigator>
  )
};

使用 TypeScript 之类的东西可以消除这些错误。

Answer 3

可能会晚了，但让我把我的解决方案用于我遇到的类似问题，因为它可能会帮助将来遇到同样问题的人。我在 Stack Navigator 中有一个选项卡导航器 (MaterialBottomTabNavigator)。不幸的是，问题是我安装了 react-navigation 和 material-bottom-tab-navigation 的不兼容（不同）版本。我使用了来自两个不同版本的 npm install @react-navigation/native 和 npm install @react-navigation/material-bottom-tabs@next（你可以看到 react-native/material-bottom-tabs 的版本是 6.x(next) 而 react-navigation/native 的版本是 5.x).结果我不得不将 npm install @react-navigation/native 更改为 npm install @react-navigation/native@next，这是与 react-navigation/material-bottom-tabs 相同的版本。 react-navigation/stack 也是如此。您应该使用 npm install @react-navigation/stack@next 而不是 npm install @react-navigation/stack.

简而言之：如果安装 react-navigation 的 5.x 版本，则应同时安装 react-navigation/material-bottom-tabs 的 5.x 版本和 react-navigation/stack。版本 6.x(next) 也是如此。

编码愉快！

React Native Navigation 5 导入 "Element type invalid"

React Native Navigation 5 import "Element type invalid"

reactjs

react-navigation-v5