React本机错误:元素types无效:期望一个string或类/函数,但得到:对象

我得到这个错误,我有很多修复这个问题。

我在这里要做的是有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/> } } } 

Solutions Collecting From Web of "React本机错误:元素types无效:期望一个string或类/函数,但得到:对象"

将您的SwitchView定义更改为

export default class SwitchView extends Component...

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

  • 忘记导出,或者导出错误
  • 您导入了不存在的内容,或者导入了错误的内容

我碰到类似的错误,但在我的情况下,这不是由export而是由import导致的,我不正确地使用import语句来导入模块中不存在的东西。

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

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

而实际上它应该是:

import MyComponent from './MyComponents/MyComponent'

这让我疯狂,花了我整整一天的时间来解决这个问题,我希望这会为一些人节省几个小时。

修改你的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/> } } } 

在我的花瓶里,我使用的是react-native 0.46.4而且有一些类似于import MainContainer from './app'其中app目录在Android和iOS中有一个共享的index.js文件,但React Native没有检测到index.js里面的app 。 一旦我切换到import MainContainer from './app/index.js'它的工作。

我只为安装的软件包而面对这个问题。 以前我写过

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

我改变了

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

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

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