检查 `MaterialTopTabNavigator` 的渲染方法答案

【问题标题】：Check the render method of `MaterialTopTabNavigator`检查 `MaterialTopTabNavigator` 的渲染方法
【发布时间】：2021-08-01 15:44:53
【问题描述】：

我想创建一个顶部选项卡导航器并将两个屏幕 Badges.js 和 Studying.js 放入选项卡中，当我在我的设备上运行它时，我收到一个错误，上面写着 “错误：元素类型无效：预期为string ..."和"检查`MaterialTopTabNavigator"的渲染方法。

TabScreen.js

import React from 'react';
import {View, Image, Text} from 'react-native';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import Badges from './Badge';
import Studying from './Studying';

const Tab = createMaterialTopTabNavigator();

const TabsScreen = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Badges" component={Badges} />
      <Tab.Screen name="Studying" component={Studying} />
    </Tab.Navigator>
  );
};
export default TabsScreen;

Badges.js

import React from 'react';
import {View, Image, Text} from 'react-native';

const Badges = () => {
  return (
    <View>
      <Text>Badges</Text>
    </View>
  );
};

export default Badges;

Studying.js

import React from 'react';
import {View, Image, Text} from 'react-native';

const Studying = () => {
  return (
    <View>
      <Text>Studying</Text>
    </View>
  );
};

export default Studying;

【问题讨论】：

你好阿里！你能写完整的错误信息吗？您的标签栏代码看起来不错。从错误“错误：元素类型无效：需要一个字符串...”来看，看起来像一个“对象”被提供给 <Text /> 组件而不是“字符串”。
不确定这是一个错误还是 import Badges from './Badge' 文件名错误。
嗨，阿杰，感谢您的评论。当我用我的程序工作的 createBottomTabNavigator 更改 createMaterialTopTabNavigator 时，我想在屏幕顶部显示我的选项卡。 错误： 元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认和命名导入'
和错误检查MaterialTopTabNavigator的渲染方法
我试图重现上面的错误，我可以确认这是由于错误的文件名import Badges from './Badge'./Badge应该是./Badges

标签： react-native react-navigation react-navigation-v5 react-navigation-top-tabs

【解决方案1】：

确保以下所有包的版本相同

"@react-navigation/material-top-tabs": "^6.0.1",
"@react-navigation/native": "^6.0.1",
"@react-navigation/stack": "^6.0.1",

【讨论】：

【解决方案2】：

我遇到了类似的问题。这是 mi 解决方案（npm 或 yarn 没问题）

a) 卸载更多更新版本 6.0.0

yarn remove react-navigation/material-top-tabs

b) 在我的情况下安装此版本 5.3.15

yarn add @react-navigation/material-top-tabs@5.3.15

c) 停止并开始您的项目和工作

d) 继续使用官方文档 https://reactnavigation.org/docs/material-top-tab-navigator/#example

【讨论】：