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

Question

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

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

这是我的开关视图：

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

Answer 1

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

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

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

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

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

而实际上它应该是：

import MyComponent from './MyComponents/MyComponent'

这让我发疯，花了我一整天的时间才弄明白，我希望这可以为某些人节省几个小时。

Answer 2

将您的 SwitchView 定义更改为

export default class SwitchView extends Component...

Answer 3

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

Answer 4

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

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

我改为

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

Answer 5

在我的花瓶中，我使用的是 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'它就起作用了。

Answer 6

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

我有 @react-navigation 版本 5 和 @react-navigation/drawer 版本 6，这导致了问题。

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

Answer 7

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

Answer 8

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

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

Answer 9

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

1. 您忘记导出或导出错误
2. 您导入了不存在的内容或导入了错误的内容

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

Answer 10

当您尝试访问未导出的组件时会出现此错误。 就我而言，我忘记导出一个组件而我正在访问它。

Answer 11

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

而不是导出使用导出默认值

Answer 12

就我而言，问题出在“AppLoading”的 npm 安装不正确。 使用 react-navigation 时出现错误“组件异常：元素类型无效”。 此错误下方有一条建议语句，用于检查“App”的渲染方法。 我没有正确安装“AppLoading”。 然后我将其安装为：

expo install expo-app-loading

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

import AppLoading from "expo-app-loading";

[注意：确保您的<AppLoading />应包含 onError <AppLoading /> ]。 进行这些简单的更改，我的应用程序开始按预期工作。

Answer 13

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

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

而不是这样写：

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

Answer 14

就我而言，我已经更换了

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

在 app.js 这行

const App = () => {

它对我有用。

Answer 15

在我的案例中，我实现了 rafce 命令，然后不知何故忘记了导出 App.js

const App = () =>  {
  return (
    <NavigationContainer theme={theme}>
      <Stack.Navigator screenOptions={{ headerShown : false}} initialRouteName="Home">
        <Stack.Screen name='Home' component={Home}/>
        <Stack.Screen name='Details' component={Details}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

然后我意识到我没有添加导出。 然后我把我的代码改成了这个，它工作得很好：

const App = () =>  {
  return (
    <NavigationContainer theme={theme}>
      <Stack.Navigator screenOptions={{ headerShown : false}} initialRouteName="Home">
        <Stack.Screen name='Home' component={Home}/>
        <Stack.Screen name='Details' component={Details}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Answer 16

我处理了与您的错误相同的问题，即您的组件无效，即SwitchView您将此组件作为 object checkitout 返回。

希望这个提示对您有所帮助我是stackoverflow的新手，所以不熟悉答案选项卡谢谢:)

Answer 17

我遇到了这个问题

import Something from '@library';

刚改成

import { Something } from '@library';

反之亦然