时间戳

首页 > 解决方案 > 如何修复元素类型无效：需要一个字符串（对于内置组件）？

javascript - 如何修复元素类型无效：需要一个字符串（对于内置组件）？

问题描述

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

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

我的代码如下所示：
App.js

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Weather from './components/Weather';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Weather />
      </View>
    );
  }
}

天气.js 

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Icon } from 'react-native-vector-icons/MaterialCommunityIcons';

export default Weather = () => (
  <View style={styles.weatherContainer}>
    <View style={styles.headerContainer}>
        <Icon size={48} name="weather-sunny" color={'#fff'} />
        <Text style={styles.tempText}> Temperature </Text>
    </View>
    <View style={styles.bodyContainer}>
        <Text style={styles.title}>Sunny</Text>
        <Text style={styles.subtitle}>Hurts the eyes!</Text>
    </View>
  </View>
);

我检查了以前的答案，尝试了命名和默认导出，但仍然有错误。谢谢。

标签： javascriptreactjsreact-native

解决方案

经过几个小时的头撞墙后，我设法调试，错误与此导入有关（不是天气导入）：

import { Icon } from 'react-native-vector-icons/MaterialCommunityIcons';.
这应该是这样的默认导入：
import Icon from ...

推荐阅读