Question

我正在将组件导入我的react本机应用程序，即使尝试了已经在网上找到的解决方案后，我仍然遇到相同的错误，我是一个初学者，所以可能是我缺少了一些明显的东西

我尝试将导入名称用大括号括起来，但似乎没有帮助

my main app.js
    import React from 'react';
    import { StyleSheet, View, Header, } from 'react-native';
    import { NumberInput } from './src/components/NumberInput';

    export default class App extends React.Component {
    render() {
      return (
        <View style={styles.container} >
        <Header>Efees</Header>
          <NumberInput />
        </View>
      );
    }
    }


    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      },
      TextInputStyle: {
        textAlign: 'center',
        height: 40,
        borderRadius: 10,
        borderWidth: 2,
        borderColor: '#009688',
        marginBottom: 10,
        width: 100,
        fontSize: 20
    }
    });


    import React, { Component } from 'react';
    import { StyleSheet, TextInput } from 'react-native';

    export default class NumberInput extends Component {

    render() {
      return (
          <TextInput
                    underlineColorAndroid='transparent'
                    style={styles.TextInputStyle}
                    keyboardType={'numeric'}
          />
      );
     }
    }


    const styles = StyleSheet.create({
      TextInputStyle: {
        textAlign: 'center',
        height: 40,
        borderRadius: 10,
        borderWidth: 2,
        borderColor: '#009688',
        marginBottom: 10,
        width: 100,
        fontSize: 20
    }
    });

expo给我这个错误消息：

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.

This error is located at:
    in RCTView (at View.js:45)
    in View (at App.js:8)
    in App (at withExpoRoot.js:20)
    in RootErrorBoundary (at withExpoRoot.js:19)
    in ExpoRootComponent (at renderApplication.js:35)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:98)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:115)
    in AppContainer (at renderApplication.js:34)

Answer 1

您似乎错误地导入了NumberInput组件。您默认将其导出，但是将其作为命名导出导入。

要解决此问题，请将main.js的第三行更改为：

import NumberInput from './src/components/NumberInput';

那应该可行。

这是因为我们有

命名出口：（出口）使用命名导出，每个文件可以有多个命名导出。然后导入要用大括号括起来的特定出口。导入的模块的名称必须与导出的模块的名称相同。

默认导出：（导出默认）每个文件只能有一个默认导出。导入时，我们必须指定一个名称并导入，例如：

import NumberInput from './src/components/NumberInput';

因此，导入的导出带有大括号，默认情况下不带大括号。

此外，我们可以将所有命名的导出导入为：

import * as NamedNumberInput from "./src/components/NamedNumberInput";

世博会导入错误：不变的违规元素类型无效，预期为字符串（用于内置组件）

1 个答案: