React-Native Invariant Violation：元素类型无效

Posted 2023-02-21

【中文标题】React-Native Invariant Violation：元素类型无效

【英文标题】：React-Native Invariant Violation: Element type is invalid

【发布时间】：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;

【参考方案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 default 前 class yourclassname extends Component 在 App.js 中

【讨论】：

添加更多细节