web-dev-qa-db-ja.com

React NativeでNavigatorにコンポーネントを適切にインポートするにはどうすればよいですか？

_index.ios_ファイルのEnterNameで使用したい別のフォルダーにNavigatorという名前のコンポーネントがあります。 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コンポーネントをインポートする2つの異なる方法を試しましたが、どちらも機能しません。

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はコンポーネント{を拡張するようです。

javascriptimportreactjsmodulereact-native
13
AlwaysQuestioning

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

23
agent_hunt