Question

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

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

检查NavBottomBar的呈现方法。

此错误位于：在sureSingleNavigator中（位于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中的返回组件

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。

不相关，但是您还应该将图标呈现为react元素，而不是将其称为函数。

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

现在可能已经晚了，但让我将我的解决方案用于我遇到的类似问题，因为它可能会帮助将来遇到相同问题的人。我在 MaterialBottomTabNavigator 中有一个标签导航器 (Stack Navigator)。不幸的是，问题是我安装了不兼容（不同）的 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 的版本是 {{ 1}})。因此，我不得不将 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 的 5.x 版本，您应该安装 react-navigation 和 {{1} 的 5.x 版本}.版本 react-navigation/material-bottom-tabs 也是如此。

快乐编码！

React Native Navigation 5导入“元素类型无效”

3 个答案: