javascript - 如何在React Native中将组件正确导入到我的导航器中？

我要在EnterName文件的Navigator中使用的另一个文件夹中有一个名为index.ios的组件。当我将EnterName放在同一文件中时，我没有任何问题，但是当我尝试从另一个文件中导入它时，我得到了:

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`

我尝试了两种不同的导入EnterName组件的方法，但均无效:
import {EnterName} from './App/Components/EnterName';var EnterName = require('./App/Components/EnterName');
下面是一些使用Navigator并尝试使用另一个文件夹中的组件EnterName的文本(当在同一文件中声明EnterName时，此方法有效)。

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

而且，如果您想查看EnterName文件，则在这里:

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;

您能帮我弄清楚如何模块化我的代码吗？

编辑:我只是忘记了module.exports末尾的“s”。似乎导出默认类_classname扩展了Component {是解决方法。

最佳答案

您是否错过了module.export末尾的's'。应该是module.exports。在这种情况下，导入应为

import EnterName from './App/Components/EnterName

除了module.exports外，您还可以使用

export default class EnterName extends Component

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