Jak poprawnie zaimportować komponent do mojego nawigatora w trybie React Native?

Question

Mam element o nazwie EnterName w innym folderze, którego chcę użyć w moim Navigator w moim pliku index.ios. Kiedy kładę EnterName w tym samym pliku mam żadnych problemów, ale gdy próbuję i zaimportować go z innego pliku otrzymuję:

Element type is invalid: expected a string (for built-in components 
or a class/function (for composite components) but got: undefined. 
Check the render method of `Navigator` 

Próbowałem dwa różne sposoby importowania składnika EnterName, ani pracy:

import {EnterName} from './App/Components/EnterName'; var EnterName = require('./App/Components/EnterName');

Poniżej jest tekst, który używa Navigator i próbuje użyć komponentu EnterName z innego folderu (działa gdy EnterName jest zadeklarowany w tym samym pliku).

render() { 
    return (
     <Navigator 
     initialRoute={{name: 'Name entry', index: 0}} 
     renderScene={(route, navigator) => 
      <EnterName 
       name={route.name} 
       onForward={() => { 
       var nextIndex = route.index + 1; 
       navigator.push({ 
        name: 'Scene ' + nextIndex, 
        index: nextIndex, 
       }); 
       }} 
       onBack={() => { 
       if (route.index > 0) { 
        navigator.pop(); 
       } 
       }} 
      /> 
     } 
     /> 
    ); 
    } 
} 

A jeśli chcesz zobaczyć plik EnterName, to tutaj:

import React, { 
    Text, 
    View, 
    Component, 
    Image, 
    StyleSheet 
} from 'react-native'; 

class EnterName extends Component { 
    render() { 
    return (
     <View style={styles.center}> 
     <View style={styles.flowRight}> 
      <TextInput style={styles.inputName} 
      placeholder="Enter your name" 
      textAlign="center" 
      onChangeText={(text) => this.setState({text})} 
      //value={this.state.text} 
      /> 

      <TouchableHighlight style={styles.button} 
      underlayColor='#99d9f4'> 
      <Text style={styles.buttonText}> Go </Text> 
     </TouchableHighlight> 
     </View> 
     </View> 
    ) 
    } 
} 
// The stylesheet is here, and then below it I have: 
module.export = EnterName; 

Pomożesz mi zorientować się, jak zmodularyzowanie mój kod?

EDYCJA: Właśnie zapomniałem "s" na końcu module.exports. Wygląda na to, że eksportuje domyślną klasę _classname extends Component {jest drogą do zrobienia.

Answer 1

Brakowało Ci 's' pod koniec module.export. Powinno to być module.exports. W tym przypadku import powinien być

import EnterName from './App/Components/EnterName 

Zamiast module.exports można również użyć

export default class EnterName extends Component 

https://developer.mozilla.org/en/docs/web/javascript/reference/statements/import