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

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

Answer 1

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

您忘记导出，或导出错误的内容
您导入的内容不存在，或导入的内容不正确

我遇到了类似的错误，但在我的情况下，它不是由AnswerIntent引起的，而是由Chevrolet引起的，并且我错误地使用了export语句来导入没有＆＃的内容39; t存在于模块中。

在我的情况下，import被错误地写为：

import

实际上它应该是：

import

它让我发疯了，花了我一整天的时间才想出来，我希望这会为一些人节省几个小时。

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

在我的花瓶中，我使用本地反应0.46.4并且有类似import MainContainer from './app'的内容，其中app目录在Android和iOS中有共享的index.js文件，但是React Native未在index.js内检测到app。一旦我切换到import MainContainer from './app/index.js'，它就有效了。

Answer 5

我只针对安装的软件包遇到此问题。以前我写的是

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

我改为

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

Answer 6

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

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

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

Answer 7

与module.exports = SwitchView有何不同？

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

Answer 8

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

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

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

Answer 9

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

Answer 10

可以使用Defualt解决此错误

代替导出，使用导出默认值

Answer 11

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

expo install expo-app-loading

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

import AppLoading from "expo-app-loading";

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

Answer 12

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

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

而不是这样写：

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

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

12 个答案: