javascript - How can I properly import a Component into my Navigator in React Native? - Stack Overflow

admin管理员组

文章数量:1193364

I have a component named EnterName in another folder I want to use in my Navigator in my index.ios file. When I put EnterName in the same file I get no problems, but when I try and import it from another file I get:

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`

I've tried two different ways of importing the EnterName component, and neither work:

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

Below is some text that uses Navigator and tries to use the component EnterName from another folder (this works when EnterName is declared in the same file).

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

And, if you want to see the EnterName file, it's here:

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;

Can you help me figure out how to modularize my code?

EDIT: I just forgot the "s" at the end of module.exports. Seems like export default class _classname extends Component { is the way to go.

I have a component named EnterName in another folder I want to use in my Navigator in my index.ios file. When I put EnterName in the same file I get no problems, but when I try and import it from another file I get:

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`

I've tried two different ways of importing the EnterName component, and neither work:

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

Below is some text that uses Navigator and tries to use the component EnterName from another folder (this works when EnterName is declared in the same file).

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

And, if you want to see the EnterName file, it's here:

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;

Can you help me figure out how to modularize my code?

EDIT: I just forgot the "s" at the end of module.exports. Seems like export default class _classname extends Component { is the way to go.

• javascript
• import
• reactjs
• module
• react-native

Share Improve this question Follow edited Jul 28, 2017 at 1:51 AlwaysQuestioning asked Mar 7, 2016 at 17:14 AlwaysQuestioningAlwaysQuestioning 1,48455 gold badges2525 silver badges4848 bronze badges 4

• Try doing export default class EnterName extends Component – Nader Dabit Commented Mar 7, 2016 at 17:18
• I tried that both with and without the module.export = EnterName, and then with both of my variations of importing in the index.ios class. Did not work. – AlwaysQuestioning Commented Mar 7, 2016 at 17:20
• You can refer to github.com/react-native-simple-router-community/… – Nicolas Charpentier Commented Mar 7, 2016 at 18:05
• 2 I always use module.exports = EnterName, I don't know much about JavaScript and what's valid, but could that be the issue? – Joseph Roque Commented Mar 7, 2016 at 18:52

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 23

Have you missed 's' at the end of module.export. It should be module.exports. In that case the import should be

import EnterName from './App/Components/EnterName

Instead of module.exports you can also use

export default class EnterName extends Component

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

本文标签： javascriptHow can I properly import a Component into my Navigator in React NativeStack Overflow