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

I am getting this error and I am having a lot of trouble fixing this.

我收到此错误,我在修复此问题时遇到了很多麻烦。

What I am trying to do here is have 3 different screens and have a tabbar that navigates to each screen.

我在这里尝试做的是有3个不同的屏幕,并有一个导航到每个屏幕的tabbar。

Here is my index:

这是我的索引:

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);

here is my SwitchView:

这是我的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/>
    }
}
}

6 个解决方案

#1

This is probably caused by some JS module export/import issues in your program, typically for one of the two reasons listed below:

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

You forget to export, or you export something incorrectly

您忘记导出,或导出错误的内容

You import something that doesn't exist, or you import something incorrectly

您导入不存在的内容,或导入错误的内容

I ran into similar error, but in my case, it is not caused by export but caused by import, and I used the import statement incorrectly to import something that doesn't exist in the module.

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

In my case, the import was incorrectly written as:

在我的情况下,导入被错误地写为:

import { MyComponent } from './MyComponents/MyComponent'

从'./MyComponents/MyComponent'导入{MyComponent}

while actually it should be:

实际上它应该是:

import MyComponent from './MyComponents/MyComponent'

从'./MyComponents/MyComponent'导入MyComponent

And it drove me crazy and took me a whole day to figure it out and I hope this will save several hours for some people.

它让我疯狂,并花了我一整天的时间来弄清楚它,我希望这会为一些人节省几个小时。

#2

Change your SwitchView definition to

将SwitchView定义更改为

export default class SwitchView extends Component...

export默认类SwitchView扩展Component ...

#3

Modify your SwitchView to this:

将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/>
    }
}
}

#4

In my vase I was on react-native 0.46.4 and had something like import MainContainer from './app' where the app directory had a shared index.js file amongst Android and iOS, but React Native wasn't detecting an index.js inside app. Once I switched to import MainContainer from './app/index.js' it worked.

在我的花瓶中,我使用的是反应原生的0.46.4并且有类似于来自'./app'的导入MainContainer,其中app目录在Android和iOS中有共享的index.js文件,但是React Native没有检测到索引。应用程序内的js。一旦我从'./app/index.js'切换到导入MainContainer就可以了。

#5

I faced this issue only for the packages installed. Previously I wrote as

我只针对安装的软件包遇到了这个问题。以前我写过

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

I changed to

我换了

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

#6

How is that different from module.exports = SwitchView?

与module.exports = SwitchView有什么不同?

For me module.exports works for all of my js files except one.

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

#1