React Native error: Тип элемента недействителен: ожидается строка или класс/функция, но получен: объект

Я получаю эту ошибку, и у меня много проблем с ее устранением.

То, что я пытаюсь сделать здесь, это иметь 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/>
    }
}
}

Ответ 1

Измените определение SwitchView на

export default class SwitchView extends Component...

Ответ 2

Вероятно, это связано с некоторыми проблемами экспорта/импорта модуля JS в вашей программе, как правило, по одной из двух причин, перечисленных ниже:

Вы забываете экспортировать или экспортируете что-то неправильно
Вы импортируете что-то, чего не существует, или вы импортируете что-то неправильно

Я столкнулся с подобной ошибкой, но в моем случае это не вызвано export, а вызвано import, и я неправильно использовал инструкцию import для импорта того, что не существует в модуле.

В моем случае import был неправильно записан как:

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

хотя на самом деле это должно быть:

import MyComponent from './MyComponents/MyComponent'

И это сбило меня с ума и взяло меня целый день, чтобы понять это, и я надеюсь, что это сэкономит несколько часов для некоторых людей.

Ответ 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/>
    }
}
}

Ответ 4

В моей вазе я был на response-native 0.46.4 и имел что-то вроде import MainContainer from './app', где каталог app имел общий файл index.js среди Android и iOS, но React Native не обнаруживал index.js внутри app. Как только я переключился на import MainContainer from './app/index.js', он сработал.

Ответ 5

Я столкнулся с этой проблемой только для установленных пакетов. Раньше я писал как

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

Я изменился на

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

Ответ 6

Как это отличается от module.exports = SwitchView?

Для меня module.exports работает для всех моих js файлов, кроме одного.