Le type d'élément est invalide, vous avez probablement oublié d'exporter votre composant.

Question

Je reçois l'erreur suivante lorsque j'essaie d'exécuter mon code sur le simulateur iOS. L'erreur indique que "le type d'élément est invalide: une chaîne attendue (pour les composants intégrés) mais obtenue: non définie Vous avez probablement oublié d'exporter votre composant à partir du fichier dans lequel il est défini."

J'ai vu sur les messages d'autres personnes avec le même problème qu'ils avaient besoin d'ajouter soit "export default App" à la fin du fichier ou utiliser "export default class" à la déclaration de la classe. Le tutoriel que je suis https://medium.com/@gurusundesh/getting-started-with-react-native-mapview-5e0bd73aa602. Il se pourrait que l'article soit vieux et que le réactif-natif ait changé depuis.

Toute suggestion sur la façon de résoudre ce problème serait grandement appréciée.

Merci

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

Answer 1

Modifier votre importation de MapView à:

import MapView from 'react-native-maps'; 

par les docs: https://github.com/airbnb/react-native-maps