元素类型无效，您可能忘记导出组件答案

【问题标题】：Element type is invalid, you likely forgot to export your component元素类型无效，您可能忘记导出组件
【发布时间】：2017-10-13 20:47:16
【问题描述】：

尝试在 iOS 模拟器上运行我的代码时出现以下错误。错误指出“元素类型无效：需要一个字符串（对于内置组件）但得到：未定义。您可能忘记从定义它的文件中导出组件。”

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

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

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

谢谢

/**
 * 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;

【问题讨论】：

标签： javascript react-native react-native-ios

【解决方案1】：

将 MapView 的导入更改为：

import MapView from 'react-native-maps';

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

【讨论】：

谢谢！请问{ MapView } 和 MapView 有什么区别？
MapView 表示您要从 repo 导入默认值。如果您查看 repo，您会注意到 index.js 是主文件（在 NPM 包中定义）。 index.js 使用 module.exports = MapView 相当于导出默认 MapView。 { MapView } 表示您想从包中获取特定的导出，在这种情况下是未定义的。注意 React Native 实现 github.com/facebook/react-native/blob/master/Libraries/…。它正在导出一个对象。因此，当您导入 { View } 时，您将从该对象获取视图