React Native 错误:元素类型无效:预期为字符串或类/函数,但得到:对象

IT技术 javascript android reactjs react-native
2021-05-24 03:29:12

我收到此错误,并且在解决此问题时遇到了很多麻烦。

我在这里尝试做的是有 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/>
    }
}
}
4个回答

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

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

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

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

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

而实际上它应该是:

import MyComponent from './MyComponents/MyComponent'

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

将您的 SwitchView 定义更改为

export default class SwitchView extends Component...

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

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

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

我改为

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