如何在React Native中正确导入组件到导航器中？

问题描述：

我在另一个文件夹中有一个名为EnterName的组件，我想在我的Navigator中使用我的index.ios文件。当我在同一个文件把EnterName我没有得到任何的问题，但是当我试图从另一个文件导入它，我得到：如何在React Native中正确导入组件到导航器中？

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 extends Component {是要走的路。

尝试做'出口默认类EnterName扩展Component' –

我想，都与并且没有'module.export = EnterName'，然后使用我在index.ios类中导入的两个变体。不工作。 – AlwaysQuestioning

你可以参考https://github.com/react-native-simple-router-community/react-native-simple-router –

答

你错过了's'在module.export的末尾。它应该是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

如何在React Native中正确导入组件到导航器中？

相关推荐