简体   繁体   中英

Component won't recognize it's being exported

I've encountered a very strange error. I feel that I've exported the Home component in a normal and conventional manner. Below, I've posted the .js files that I think are relevant in order to rectify this error. Despite this, In my iOS simulator, I'm still getting an error that says:

Element type is invalid: expected a string (for built-in components) or 
a class/function (for composite components) but got: undefined.  You 
likely forgot to export your component from the file it's defined in.

Check the render method of 'Home'.

Here's Home.js :

import React from 'react';
import Container from 'native-base';
import MapContainer from "../../../components/MapContainer/index";

class Home extends React.Component {

    componentDidMount() {
        this.props.setName();
    }

    render() {
        const region = {
            latitude: 3.146642,
            longitude: 101.695845,
            latitudeDelta: 0.8922,
            longitudeDelta: 0.0421
        }
        return(
            <Container>
                <MapContainer region={region}/>
            </Container>
        );
    }
}

export default Home;

Here's index.js :

import React from 'react';
import View from 'native-base';
import styles from './MapContainerStyles';
import * as MapView from "react-native-maps/lib/components/ProviderConstants";

const MapContainer = ({region}) => {
    return(
        <View style={styles.container}>
            <MapView
                provider={MapView.PROVIDER_GOOGLE}
                style={styles.map}
                region={region}
            >
            </MapView>
        </View>
    );
}

export default MapContainer;

The problem isn't your export of Home . We know that because Home 's render is being called.

From the error, it looks like either Container or MapContainer isn't being imported correctly. I suspect it's that Container is a named export, so you need to use a named import:

import { Container } from 'native-base';

Update: Yup, here's an example from the NativeBase documentation :

 import {Container, Content, Text} from 'native-base'; 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM