我想在index.ios文件的Navigator中使用另一个文件夹中名为EnterName的组件.当我在同一个文件中输入EnterName时,我没有遇到任何问题,但当我try 从另一个文件导入它时,我得到:

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`

我try 了两种导入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;

你能帮我找出如何模块化我的代码吗?

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.export分结束时的"s".应该是module.exports.在这种情况下,进口应该是

import EnterName from './App/Components/EnterName

而不是模块.也可以使用导出

export default class EnterName extends Component

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

React-native相关问答推荐

如何停止在Expo路由中将新文件显示为菜单列表?

React Native 中的视图与 Flex 不占用相同的高度空间

React Native:无法将具有 resizeMode包含的图像定位在父组件的 flex-end

元素类型无效:应为字符串

我如何限制 FlatList 中的元素并增加负载?

无法在 React Native iOS 模拟器中按 URI 显示图像

React-Native:显示加载屏幕直到加载 webview

如何在 React Native 中将静态图像拉伸为背景?

如何在react native中过滤对象数组?

将 svg 转换为 react-native-svg

如何使用 Typescript 在无状态组件上设置 navigationOptions

背景图像在react中不起作用

ScrollView visible Scroll Bar

axios 的网络错误和react-native

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.

当数据为空时,React-Native FlatList 呈现零状态

xcode 10错误:multiple commands produce

我们可以在 react webapp 和 react native 应用程序之间共享代码吗,并且可以在 react-native 生产环境中使用

React native - 以编程方式判断是否启用了远程 JS 调试

如何在 React-Native 中停止touch 事件传播