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

【问题标题】：React Native error: Element type is invalid: expected a string or a class/function but got: objectReact Native 错误：元素类型无效：期望字符串或类/函数，但得到：对象
【发布时间】：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/>
    }
}
}

【问题讨论】：

标签： javascript android reactjs react-native

【解决方案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 = () => {

它对我有用。

【讨论】：