Как исправить нарушение инварианта: недопустимый тип элемента: ожидается строка (для встроенных компонентов)

Question

Я получаю эту ошибку, хотя мой импорт в порядке.

Инвариантное нарушение: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составного) компоненты), но получил: не определено. Вы, вероятно, забыли экспортировать свой компонент из файла, в котором он определен, или вы могли смешать импорт по умолчанию и с именами. Проверьте метод рендеринга '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 каждый импортируемый компонент, и найдите его там.