Javascript 如何将组件正确导入到 React Native 的导航器中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35849848/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I properly import a Component into my Navigator in React Native?
提问by AlwaysQuestioning
I have a component named EnterNamein another folder I want to use in my Navigatorin my index.iosfile. When I put EnterNamein the same file I get no problems, but when I try and import it from another file I get:
我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`
I've tried two different ways of importing the EnterName component, and neither work:
我尝试了两种不同的导入 EnterName 组件的方法，但都不起作用：
import {EnterName} from './App/Components/EnterName';
var EnterName = require('./App/Components/EnterName');
import {EnterName} from './App/Components/EnterName';
var EnterName = require('./App/Components/EnterName');
Below is some text that uses Navigatorand tries to use the component EnterNamefrom another folder (this works when EnterName is declared in the same file).
下面是一些使用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();
}
}}
/>
}
/>
);
}
}
And, if you want to see the EnterName file, it's here:
而且，如果你想查看 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;
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.
编辑：我只是忘记了 module.exports 末尾的“s”。似乎 export default class _classname extends Component { 是要走的路。
回答by agenthunt
Have you missed 's' at the end of module.export. It should be module.exports. In that case the import should be
您是否错过了结尾处的“s” module.export。应该是module.exports。在这种情况下，导入应该是
import EnterName from './App/Components/EnterName
Instead of module.exports you can also use
您还可以使用代替 module.exports
export default class EnterName extends Component
https://developer.mozilla.org/en/docs/web/javascript/reference/statements/import
https://developer.mozilla.org/en/docs/web/javascript/reference/statements/import
