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

问题描述

尽管我的进口很好，但我收到了这个错误。

不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。检查“底部导航”的渲染方法。

我的代码如下所示：

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

有人能帮我吗？

标签： javascriptreact-nativereact-navigation

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

问题描述

解决方案

推荐阅读