React Native 错误：元素类型无效：期望字符串或类/函数，但得到：对象

Posted 2023-02-22

【中文标题】React Native 错误：元素类型无效：期望字符串或类/函数，但得到：对象

【英文标题】：React Native error: Element type is invalid: expected a string or a class/function but got: object

【发布时间】：2016-10-03 21:07:00

【问题描述】：

我收到了这个错误，我在修复这个问题时遇到了很多麻烦。

我在这里尝试做的是有 3 个不同的屏幕，并有一个导航到每个屏幕的标签栏。

这是我的索引：

import React,  Component  from 'react';
import  AppRegistry, Navigator, StyleSheet, View, Text  from 'react-native';

import Nav from './app/components/Nav';
import Screen from './app/Screen';

import Tabs from 'react-native-tabs'

import SwitchView from './SwitchView';

class Proj extends Component 

constructor(props)
    super(props);


render()
    var x = "FeedView";
    return(

          <View style=styles.container>
            <Tabs selected=x style=backgroundColor:'white'
                  selectedStyle=color:'red' onSelect=el=> x = el.props.name>
                <Text name="FeedView">First</Text>
                <Text name="WikiView" selectedIconStyle=borderTopWidth:2,borderTopColor:'red'>Second</Text>
                <Text name="BoardView">Third</Text>
            </Tabs>

            <SwitchView id=x/>

          </View>
    );



const styles = StyleSheet.create(
container: 
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
,
welcome: 
fontSize: 20,
textAlign: 'center',
margin: 10,
,
instructions: 
textAlign: 'center',
color: '#333333',
marginBottom: 5,
,
)

AppRegistry.registerComponent('Proj', () => Proj);

这是我的 SwitchView：

import Feed from './app/pages/Feed/Feed';
import Board from './app/pages/Board';
import Wiki from './app/pages/Wiki';

class SwitchView extends Component 
render()
    var  id  = this.props;

    switch (id) 
        case "FeedView":
            return <Feed/>
        case "WikiView":
            return <Wiki/>
        case "BoardView":
            return <Board/>
    

【参考方案1】：

将您的 SwitchView 定义更改为

export default class SwitchView extends Component...

【讨论】：

@Parkicism 如果这是你的答案，你应该接受这个。它看起来也像第一个正确回答的人。

【参考方案2】：

将您的 SwitchView 修改为：

import Feed from './app/pages/Feed/Feed';
import Board from './app/pages/Board';
import Wiki from './app/pages/Wiki';
export default class SwitchView extends Component 
render()
    var  id  = this.props;

    switch (id) 
        case "FeedView":
            return <Feed/>
        case "WikiView":
            return <Wiki/>
        case "BoardView":
            return <Board/>
    

【参考方案3】：

这与 module.exports = SwitchView 有何不同？

对我来说 module.exports 适用于我所有的 js 文件，除了一个。

【参考方案4】：

这可能是由您的程序中的一些 JS 模块导出/导入问题引起的，通常是以下两个原因之一：

您忘记导出，或导出错误 您导入了不存在的内容，或者您​​错误地导入了某些内容

我遇到了类似的错误，但在我的情况下，它不是由export 引起的，而是由import 引起的，并且我错误地使用了import 语句来导入模块中不存在的东西。

就我而言，import 被错误地写为：

import MyComponent from './MyComponents/MyComponent'

实际上应该是：

import MyComponent from './MyComponents/MyComponent'

它把我逼疯了，花了我一整天的时间才弄清楚，我希望这能为一些人节省几个小时。

【讨论】：

我也有这个问题。我了解到这取决于 MyComponent 的导出方式。当你把'export default MyComponent;'那么导入没有 。导出时不使用 default 关键字，则需要用 将组件名称括起来，即 MyComponent 。

我刚刚在导入中删除了花括号

在我的情况下，我需要将“import * as Fork”更改为“import Fork”

【参考方案5】：

在我的花瓶中，我使用 react-native 0.46.4 并有类似 import MainContainer from './app' 的东西，其中 app 目录在 android 和 ios 之间有一个共享的 index.js 文件，但 React Native 没有检测到 @987654325 @里面app。一旦我切换到import MainContainer from './app/index.js'，它就起作用了。

【讨论】：

这正是我在 RN 0.42.3 上发生的事情。谢谢！

【参考方案6】：

我只在安装的软件包时遇到了这个问题。 以前我写成

import WebView from 'react-native-webview-messaging/WebView';

我改成

import  WebView  from 'react-native-webview-messaging/WebView';

【参考方案7】：

这可能是由您的程序中的一些 JS 模块导出/导入问题引起的，通常是以下两个原因之一：

您忘记导出或导出错误 您导入了不存在的内容或错误地导入了某些内容

我遇到了类似的错误，但在我的情况下，它不是由导出引起的，而是由导入引起的。我错误地使用了 import 语句来导入模块中不存在的东西。

【参考方案8】：

当您尝试访问未导出的组件时会出现此错误。在我的例子中，我忘记导出一个组件并且我正在访问它。

【参考方案9】：

这个错误可以通过使用 Defualt 来解决

使用 export default

而不是

export

【讨论】：

感谢 Umer 的贡献。您能否也请添加一些说明来解释您的解决方案。为什么你认为这会起作用，是什么让你确定这是解决方案。通读这些将有助于 OP 更好地理解他们的错误，并能够更有效地利用您的答案。

【参考方案10】：

在我的情况下，问题在于错误地安装了“AppLoading”的 npm。 使用 react-navigation 时出现错误“组件异常：元素类型无效”。 在此错误下方有建议语句来检查“应用程序”的渲染方法。 我没有正确安装“AppLoading”。然后我将其安装为：

expo install expo-app-loading

然后将应用加载导入更改为

import AppLoading from "expo-app-loading";

[注意：确保你的 <AppLoading /> 应该包含 onError 属性]。 进行这些简单的更改后，我的应用开始按预期运行。

【参考方案11】：

我在写的时候遇到了这个问题：

import ErrorMessage from '../Components/ErrorMessage';

而不是这样写：

import ErrorMessage from '../Components/ErrorMessage';

【参考方案12】：

在我的情况下，通过检查 react-navigation 和 react-navigation/drawer 的版本来修复错误

我使用的是@react-navigation 版本 5 并且拥有 @react-navigation/drawer 版本 6，这就是导致问题的原因。

我删除了版本 6 然后安装了@react-navigation/drawer 5 版，问题就解决了

【参考方案13】：

我遇到了同样的问题，我必须更新我所有的导航/堆栈和抽屉，使其全部处于最新版本

【参考方案14】：

在我的情况下，我已经替换了

const App: () => React$Node = () => 

在 app.js 这一行加上

const App = () => 

它对我有用。