如何解决不变式违规：元素类型无效：预期为字符串（对于内置组件）

Question

尽管导入正常，但出现此错误。

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>
  );
}

有人可以帮我吗？

Answer 1

这通常意味着您导入的其中一个不正确。我建议您在渲染方法中设置一个断点，并检查每个导入，寻找看起来不合适的导入。 （可以选择console.log或每个导入的组件，然后在其中查找。