【问题标题】:React-Native Invariant Violation: Element type is invalidReact-Native Invariant Violation:元素类型无效
【发布时间】:2018-05-29 06:17:42
【问题描述】:

当我要在我的 iPhone Expo 上运行我的 react native 应用程序时,此错误显示在红色背景区域中。

Invariant Violation:元素类型无效:应为字符串(对于内置组件) 或类/函数(用于复合组件)但得到:对象。你 可能忘记从它定义的文件中导出您的组件。

这是 'src/components/' 文件夹中的 App.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';


export default class App extends Component {
  render() {
    return (
    	<View>
      		<Text>Hello</Text>
      	</View>
    );
  }
}

这是 react-native app 文件夹中的主 App.js。

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

我使用 expo 应用程序运行此代码。我该如何解决这个错误?

【问题讨论】:

  • 你怎么知道 App.js 文件有问题?
  • 我不知道,我也没有提到 app.js 有错误。我需要了解这个问题以及如何解决这个问题。
  • 我认为问题不在于您共享的代码。我刚刚用它构建了一个测试应用程序,它可以工作。你能分享其余的应用程序代码吗?还是示例应用程序?可以的话放到github上。
  • 这是我尝试学习的简单应用程序。这些是我进行更改的代码。其他的是反应本机代码包。我没有改变任何东西。
  • 导出默认App;或导出 {LoginForm};

标签: javascript android ios reactjs react-native


【解决方案1】:

Expo 希望您从 /App.js 导出组件。但现在你只导入到/App.js。 Expo 没有接收任何要渲染的组件。您需要像这样导出您导入的组件:

export default App;

附注:仅在必须时才使用类组件。

【讨论】:

  • 您是将导出添加到主 App.js 还是组件中?您需要将其添加到主文件中。
【解决方案2】:

在我的情况下,而不是像这样导出:

export default App;

...我导出如下:

export {LoginForm};

它工作得很好。

【讨论】:

    【解决方案3】:

    在未指定默认导出的情况下以以下样式执行导出时出现此错误。我没有指定默认值,因为我从一个文件中导出多个小组件。

    export const  Modal  = (props) => (
        <div className="someClass">
        </div>        
      )
    

    我能够通过在导入语句中添加括号来使其工作。

    import {Modal} from '../components/Modal.js'
    

    【讨论】:

      【解决方案4】:

      我有同样的问题,我把 export defaultclass yourclassname extends Component 在 App.js 中

      【讨论】:

      • 添加更多细节
      猜你喜欢
      • 2017-09-16
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-03-17
      • 2020-05-10
      • 1970-01-01
      • 2019-12-05
      相关资源
      最近更新 更多