如何修复 Invariant Violation：元素类型无效：预期为字符串（对于内置组件）

Posted 2023-02-21

【中文标题】如何修复 Invariant Violation：元素类型无效：预期为字符串（对于内置组件）

【英文标题】：How to fix Invariant Violation: Element type is invalid: expected a string (for built-in components)

【发布时间】：2020-06-14 06:15:51

【问题描述】：

虽然我的导入没问题，但我收到了这个错误。

Invariant Violation：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。 检查'BottomNavigation'的渲染方法。

我的代码如下所示：

index.js

    import React from 'react';
import 
  StyleSheet,
  Text,
  Button,
  View,
  ScrollView,
  TouchableOpacity,
  Image,
  Component,
 from 'react-native';
import  createMaterialBottomTabNavigator  from '@react-navigation/material-bottom-tabs';
import  MaterialCommunityIcons  from 'react-native-vector-icons';
import Jogadores from '../jogadores';
import Lista from '../jogadores/lista';



function HomeScreen() 
  return (
    <View style=styles.home>    
      <ScrollView scrollEventThrottle=16>
        <View>
          <Text style=styles.texto>Principais Vídeos</Text>
        </View>
        <View style=styles.slider>
          <ScrollView horizontal=true showsHorizontalScrollIndicator=false>
            <Lista
              imageUri=require('../../images/ronald-juv.jpg')
              name="Cristiano Ronaldo"/>
              <Lista
              imageUri=require('../../images/messi-footer.jpg')
              name="Lionel Messi"/>
              <Lista
              imageUri=require('../../images/neymar.jpg')
              name="Neymar"/>
              <Lista
              imageUri=require('../../images/salah.jpg')
              name="Mohamed Salah"/>
              <Lista
              imageUri=require('../../images/mbappe.jpg')
              name="Kylian Mbappé"/>
              <Lista
              imageUri=require('../../images/alisson.jpg')
              name="Alisson"/>
              <Lista
              imageUri=require('../../images/bruyne.jpg')
              name="Kevin De Bruyne"/>
          </ScrollView>
        </View>
      </ScrollView>
    </View>
  );


const Tab = createMaterialBottomTabNavigator();

export default function Home(navigation) 
  return (
    <Tab.Navigator
     activeColor="#F00"
      barStyle=backgroundColor: '#272727'>
      <Tab.Screen
       name="Home"
        component=HomeScreen
        options=
          tabBarLabel:'Home',
          tabBarIcon:(color,size) =>(
            <MaterialCommunityIcons name="soccer" color='#fff' size=15 />
          )
         />
      <Tab.Screen name="Jogadores" component=Jogadores />
      <Tab.Screen name="Settings" component=HomeScreen />
    </Tab.Navigator>
  );

有人可以帮我吗？

【问题讨论】：

什么是“底部导航”？

【参考方案1】：

这通常意味着您的其中一个导入不正确。我建议在你的渲染方法中设置一个断点并检查每个导入，寻找一个看起来不正确的。 （或者console.log每个导入的组件并在那里寻找它。