webentwicklung-frage-antwort-db.com.de

Native Reaktion reagieren: Elementtyp ist ungültig: Es wurde eine Zeichenfolge oder eine Klasse/Funktion erwartet, aber: Objekt

Ich bekomme diesen Fehler und habe große Probleme damit.

Was ich hier versuche, besteht aus 3 verschiedenen Bildschirmen und einer Tab-Leiste, die zu jedem Bildschirm navigiert.

Hier ist mein Index:

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

hier ist mein 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/>
    }
}
}
javascriptandroidreactjsreact-native
23
Parkicism

Dies wird wahrscheinlich durch einige ExportImportprobleme des JS-Moduls in Ihrem Programm verursacht. Dies liegt in der Regel aus einem der beiden folgenden Gründe: - /

  • Sie vergessen den Export oder Sie exportieren etwas falsch
  • Sie importieren etwas, das nicht existiert, oder Sie importieren etwas falsch

Ich bin auf einen ähnlichen Fehler gestoßen, aber in meinem Fall wird er nicht durch export, sondern durch import verursacht, und ich habe die import-Anweisung falsch verwendet, um etwas zu importieren, das im Modul nicht vorhanden ist.

In meinem Fall wurde die import falsch geschrieben als:

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

während eigentlich sollte es sein:

import MyComponent from './MyComponents/MyComponent'

Und es hat mich verrückt gemacht, und ich habe einen ganzen Tag gebraucht, um das herauszufinden.

38
nybon

Ändern Sie Ihre SwitchView-Definition in 

export default class SwitchView extends Component...

24
Raj R

Ändern Sie Ihre SwitchView so:

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

In meiner Vase befand ich mich in reaktiver 0.46.4 und hatte so etwas wie import MainContainer from './app', wo das app-Verzeichnis eine freigegebene index.js-Datei unter Android und iOS hatte, aber React Native entdeckte keinen index.js in app. Sobald ich zu import MainContainer from './app/index.js' gewechselt habe, hat es funktioniert.

3
urubuz

Ich habe dieses Problem nur für die installierten Pakete erlebt 

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

Ich wechselte zu 

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

Wie unterscheidet sich das von module.exports = SwitchView?

Für mich funktioniert module.exports für alle meine js-Dateien außer einer. 

0
chibeepatag