web-dev-qa-db-fra.com

Réaction Erreur native: Le type d'élément n'est pas valide: une chaîne ou une classe/fonction est attendue

Je reçois cette erreur et j'ai beaucoup de difficulté à la réparer.

Ce que j'essaie de faire ici, c'est d'avoir 3 écrans différents et une barre de tabulation qui permet d'accéder à chaque écran.

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

voici mon 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

Ceci est probablement dû à des problèmes d'exportation/importation de module JS dans votre programme, généralement pour l'une des deux raisons énumérées ci-dessous:

  • Vous oubliez d'exporter ou vous exportez quelque chose de manière incorrecte
  • Vous importez quelque chose qui n'existe pas ou vous importez quelque chose de manière incorrecte

J'ai rencontré une erreur similaire, mais dans mon cas, elle n'est pas causée par export mais par import et j'ai utilisé l'instruction import de manière incorrecte pour importer un élément inexistant dans le module.

Dans mon cas, la import a été écrite de manière incorrecte comme suit:

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

alors qu’il devrait en fait être:

import MyComponent from './MyComponents/MyComponent'

Et cela m'a rendu fou et m'a pris toute une journée pour le comprendre et j'espère que cela fera gagner plusieurs heures à certaines personnes.

38
nybon

Changez votre définition SwitchView en 

export default class SwitchView extends Component...

24
Raj R

Modifiez votre SwitchView à ceci:

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

Dans mon vase, j'étais sur le 0.46.4 réactif-natif et j'avais quelque chose comme import MainContainer from './app' dans lequel le répertoire app avait un fichier index.js partagé entre Android et iOS, mais React Native ne détectait pas de index.js dans app. Une fois que je suis passé à import MainContainer from './app/index.js' cela a fonctionné.

3
urubuz

Je n’étais confronté à ce problème que pour les paquets installés . Auparavant, j’écrivais en tant que 

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

J'ai changé pour 

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

En quoi cela diffère-t-il de module.exports = SwitchView?

Pour moi, module.exports fonctionne pour tous mes fichiers js sauf un. 

0
chibeepatag