不变违规：元素类型在 createMaterialTopTabNavigator()/MaterialTopTabView 渲染方法中无效，React Native w/React Navigatio

Posted 2023-02-19

【中文标题】不变违规：元素类型在 createMaterialTopTabNavigator()/MaterialTopTabView 渲染方法中无效，React Native w/React Navigation v5

【英文标题】：Invariant Violation: Element type is invalid in createMaterialTopTabNavigator()/MaterialTopTabView render method, React Native w/ React Navigation v5

【发布时间】：2020-12-11 04:21:37

【问题描述】：

在 React Native 和 React Navigation v5 中使用 createMaterialTopTabNavigator() 时出现以下错误：

Invariant Violation: 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 `MaterialTopTabView`.

相关代码如下。我尝试删除任何无关的内容并添加省略号作为占位符，如果我遗漏了任何重要的内容，请致歉。

Connect.js：

import React,  Component  from 'react';
import  ...  from 'react-native';
import globalStyles from '../Styles/global-styles.js';
import Sessions from './Sessions.js';
import ChatList from './ChatList.js';
import  NavigationContainer  from "@react-navigation/native";
import  createMaterialTopTabNavigator  from '@react-navigation/material-top-tabs';

const TopTabNav = createMaterialTopTabNavigator();
function GetTopTabNavigator() 
    return (
        <NavigationContainer>
            <TopTabNav.Navigator tabBarOptions=...>
                <TopTabNav.Screen name="Chat" component=ChatList/>
                <TopTabNav.Screen name="Sessions" component=Sessions/>
            </TopTabNav.Navigator>
        <NavigationContainer/>
    );
;

class ConnectScreen extends Component 
    static router = TopTabNav.router;

    constructor(props) 
        super(props);
        this.state = 
            ...
        ;
    

    ...

    render() 
        ...

        return (
            <SafeAreaView style=...>
                ...
                <View style=globalStyles.container>
                    GetTopTabNavigator()
                </View>
            </SafeAreaView>
        );
    


export default ConnectScreen;

研究（和错误代码）表明这可能是组件导入或导出方式的问题。为此，我尝试了几件事：

1. 将 Top Tab Navigator 放在一个单独的文件中，然后将其导出（默认情况下，并且在 import 语句中没有适当的括号 ）——任何组合都会导致此错误或其他，解决方案是切换回这种方式。

2. 复制文档 (https://reactnavigation.org/docs/material-top-tab-navigator/) 中的确切代码，将其粘贴到 ConnectTopTabNav.js 中，然后使用

导入

import ConnectTopTabNav from './ConnectTopTabNav';

ConnectTopTabNav，我也尝试导出为默认而不是默认，上面对应的是前者（如下所示）。以下是 ConnectTopTabNav.js 的代码：

import * as React from 'react';
import  Text, View  from 'react-native';
import  createMaterialTopTabNavigator  from '@react-navigation/material-top-tabs';

function HomeScreen() 
  return (
    <View style= flex: 1, justifyContent: 'center', alignItems: 'center' >
      <Text>Home!</Text>
    </View>
  );


function SettingsScreen() 
  return (
    <View style= flex: 1, justifyContent: 'center', alignItems: 'center' >
      <Text>Settings!</Text>
    </View>
  );


const Tab = createMaterialTopTabNavigator();
export default function TobTabNav() 
    return ( 
        <Tab.Navigator>
            <Tab.Screen name="Home" component=HomeScreen />
            <Tab.Screen name="Settings" component=SettingsScreen />
        </Tab.Navigator>
    );

但是，无论我尝试将组件呈现为 ConnectTopTabNav() 还是 .我也试过把上面的代码直接放到Connect.js中，没用。

3. 查看@react-navigation/material-top-tabs 文件结构中的任何导入/导出错误。什么都没找到，这不足为奇。

4. 以多种方式将导航器放入我的 App.js 导航结构中。也是死路一条。

5. 用 组件包围导航器，并带有相应的标志以表明它独立于主导航器。 （编辑：我已将此添加到代码中以反映此更改。）

自从升级到@react-navigation 版本 5 后出现错误。在版本 4 中，我能够直接在 createMaterialTopTabNavigator() 方法中创建导航器，并且没有看到错误。

我在 React Native v0.61.5 上使用 5.4.2 版的 @react-navigation/native 和 5.2.16 版 @react-navigation/material-top-tabs。感谢任何人可以提供的任何见解——我只是看不出这里还有什么地方可以出错。如果您需要任何其他信息，请告诉我。感谢您的宝贵时间！

【参考方案1】：

您通常应该使用导航容器将导航组件包装在顶层，我在您的代码示例中看不到它。你应该有这样的东西：

import  NavigationContainer  from "@react-navigation/native";
// Your other imports

<NavigationContainer>
  <Tab.Navigator>
    <Tab.Screen name="Home" component=HomeScreen />
    <Tab.Screen name="Settings" component=SettingsScreen />
  </Tab.Navigator>
</NavigationContainer>

【讨论】：

您好，感谢您的回复。我已经尝试过，如第 5 条中所引用的那样（尽管我不确定它在我的问题中正确显示了文本 - 已编辑以确保它在那里），但它对错误没有任何影响。我已经更新了我的代码和我的问题以包含该组件。再次感谢！

是的，我没有完成第 5 点我的坏事。您的代码似乎很好，我在我身边运行它并且没有任何问题。也许尝试重新安装您文件夹中的所有软件包？

不用担心。我尝试重新安装 node_modules 和 pod，但没有效果。我没有尝试过的一件事是在一个完全独立的应用程序中运行此代码，所以我会试一试，看看它是否可以运行。

如您所见，解决方案最终是更新依赖包之一。我什至没有意识到它是相关的，直到你让我考虑更多地研究它。所以，感谢您为我指明正确的方向！

【参考方案2】：

更新：解决方案最终是更新 @react-navigation/material-top-tabs 所依赖的 react-native-tab-view 的版本。使用最新的 react-native-tab-view 版本 2.15.1 和 @react-navigation/material-top-tabs 版本 5.2.16，我的导航器按预期工作。