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

Question

在带有 React Navigation v5 的 React Native 中使用 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 文件结构是否有任何import/export 错误。没有找到任何东西，这并不奇怪。

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

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

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

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

Answer 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>

Answer 2

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

不变违规：元素类型在 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

javascript

react-native

react-navigation

react-navigation-v5