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

问题描述：

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

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

我遵循的教程是https://medium.com/@gurusundesh/getting-started-with-react-native-mapview-5e0bd73aa602。这可能是因为这篇文章很老，而且自那时起反应本来就发生了变化。

关于如何解决这个问题的任何建议将不胜感激。

感谢

/** 
 
* 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的进口改为：

import MapView from 'react-native-maps';

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

谢谢！我可以问一下{MapView}和MapView有什么不同？ – SwimmingG

MapView意味着您要从回购导入默认值。如果你看看回购，你会注意到index.js是主文件（在NPM包中定义）。 index.js使用module.exports = MapView，它相当于导出默认的MapView。 {MapView}意味着你想从包中获取特定的导出，在这种情况下是未定义的。注意React Native实现https://github.com/facebook/react-native/blob/master/Libraries/react-native/react-native-implementation.js。它正在输出一个对象。因此，当您导入{View}时，您将从该对象获取视图 –

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

相关推荐