元素类型无效，您可能忘记导出组件 [英] Element type is invalid, you likely forgot to export your component

问题描述

尝试在 iOS 模拟器上运行我的代码时出现以下错误.错误指出元素类型无效:预期为字符串(对于内置组件)但得到:未定义.您可能忘记从定义组件的文件中导出组件."

I get the following error when trying to run my code on the iOS simulator. The error states that "Element type is invalid: expected a string (for built-in components) but got: undefined. You likely forgot to export your component from the file it's defined in."

我在其他人的帖子中看到过同样的问题，他们需要在文件末尾添加导出默认应用程序"或在类的声明中使用导出默认类".

I've seen on other people's posts with the same issue they needed to add either "export default App" to the end of the file or use "export default class" at the declaration of the class.

我正在关注的教程是 https://medium.com/@gurusundesh/getting-started-with-react-native-mapview-5e0bd73aa602.可能是这篇文章比较老了，而 react-native 从那时起就发生了变化.

The tutorial I'm following is https://medium.com/@gurusundesh/getting-started-with-react-native-mapview-5e0bd73aa602. It could be that the article is old and react-native has changed since then.

任何有关如何解决此问题的建议将不胜感激.

Any suggestions on how to fix this would be much appreciated.

谢谢

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { MapView } from 'react-native-maps';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <MapView style={styles.map}
          initialRegion={{
            latitude:10,
            longitude:20,
            latitudeDelta:30,
            longitudeDelta:40
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  map: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
  }
});

export default App;

推荐答案

将 MapView 的导入更改为:

Change your import of MapView to:

import MapView from 'react-native-maps';

根据文档:https://github.com/airbnb/react-native-maps

这篇关于元素类型无效，您可能忘记导出组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！