web-dev-qa-db-fra.com

Comment puis-je importer correctement un composant dans mon navigateur en React Native?

J'ai un composant nommé EnterName dans un autre dossier que je veux utiliser dans mon Navigator dans mon fichier index.ios. Lorsque je mets EnterName dans le même fichier, je n'ai aucun problème, mais lorsque j'essaie de l'importer à partir d'un autre fichier, j'obtiens:

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`

J'ai essayé deux façons différentes d'importer le composant EnterName, et aucune ne fonctionne:

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

Ci-dessous se trouve du texte qui utilise Navigator et essaie d'utiliser le composant EnterName d'un autre dossier (cela fonctionne lorsque EnterName est déclaré dans le même fichier).

  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();
                }
              }}
            />
        }
      />
    );
  }
}

Et, si vous voulez voir le fichier EnterName, c'est ici:

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;

Pouvez-vous m'aider à comprendre comment modulariser mon code?

EDIT: j'ai juste oublié le "s" à la fin de module.exports. On dirait que la classe par défaut à l'exportation _classname étend le composant {est la voie à suivre.

javascriptimportreactjsmodulereact-native
13
AlwaysQuestioning

Avez-vous manqué 's' à la fin de module.export. CA devrait etre module.exports. Dans ce cas, l'importation doit être

import EnterName from './App/Components/EnterName

Au lieu de module.exports, vous pouvez également utiliser

export default class EnterName extends Component

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

23
agent_hunt