React Native Navigator: Attendu une classe de composant, a obtenu [object Object]

Question

l'erreur qui est affichée dans le titre s'affiche lorsque j'essaie de charger un nouveau Component à travers le composant Navigator.

My View avec le composant Navigator se présente comme suit:

render(){ 
    return(
     <Navigator 
     initialRoute={{name: 'Feed', component: Feed}} 
     renderScene={(route, navigator) => { 
      if(route.component){ 
       return React.createElement(route.component, {navigator, ...this.props}) 
      } 
      } 
     } 
     /> 
    ) 
    } 
} 

Le initialRoute rend correct Voir parfaitement. L'enfant Composant Feed qui obtient rendu contient une liste de boutons qui mettent à jour le navigateur et l'amener à rendre un nouveau composant comme suit:

updateRoute(route){ 
    this.props.globalNavigator(route) 
    this.props.navigator.push({ 
     name: route.displayLabel, 
     component: route.label 
    }) 
    } 

    render(){ 
    return(
     <View style={styles.bottomNavSection}> 
     { 
      this.state.navItems.map((n, idx) => { 
      return(
       <TouchableHighlight 
       key={idx} 
       style={this.itemStyle(n.label, 'button')} 
       onPress={this.updateRoute.bind(this, n)} 
       > 
       <Text 
        style={this.itemStyle(n.label, 'text')} 
       > 
        {n.displayLabel} 
       </Text> 
       </TouchableHighlight> 
      ) 
      }) 
     } 
     </View> 
    ) 
    } 

Notez que le function updateRoute(route) reçoit le nom du nouveau composant comme suit: onPress={this.updateRoute.bind(this, n)} . Où n est égal à {displayLabel: 'Start', label: 'Feed', icon: ''}, par exemple.

Modifier Contenu de mon Profil.js Composant:

import React, { Component } from 'react' 
import ReactNative from 'react-native' 
import API from '../lib/api' 

import BottomNavigation from '../components/BottomNavigation' 

const { 
    ScrollView, 
    View, 
    Text, 
    TouchableHighlight, 
    StyleSheet, 
} = ReactNative 

import { connect } from 'react-redux' 

class Profil extends Component { 

    constructor(props){ 
    super(props) 
    } 

    render(){ 
    return(
     <View style={styles.scene}> 
     <ScrollView style={styles.scrollSection}> 
      <Text>Profil</Text> 
     </ScrollView> 
     <BottomNavigation {...this.props} /> 
     </View> 
    ) 
    } 
} 

const styles = StyleSheet.create({ 
    scene: { 
    backgroundColor: '#0f0f0f', 
    flex: 1, 
    paddingTop: 20 
    }, 
    scrollSection: { 
    flex: .8 
    } 
}) 

function mapStateToProps(state){ 
    return { 
    globalRoute: state.setGlobalNavigator.route 
    } 
} 

export default connect(mapStateToProps)(Profil) 

Answer 1

Le problème était que onPress={this.updateRoute.bind(this, n)} ne contenait pas la référence de composant appropriée mais contenait à la place le nom du composant en tant que chaîne.

le fixe en modifiant la fonction:

updateRoute(route){ 
    this.props.globalNavigator(route) 
    this.props.navigator.push({ 
     name: route.displayLabel, 
     component: route.component 
    }) 
    } 

et l'amélioration de l'état avec la référence de composant et l'importation du composant au début du document.

this.state = { 
    navItems: [ 
     {displayLabel: 'Start', label: 'Feed', icon: start, component: Feed}, 
    ] 
} 

Answer 2

Je pense que vous oubliez d'exporter votre composant.