Réagir Native Issue: undefined n'est pas un objet (évaluation 'this.props.navigator.push')

Question

Suis un novice réagit natif et j'essaie de naviguer entre les écrans ... J'ai suivi un tutoriel simple et, malheureusement, quand j'appuie sur la page "To Stats" TouchableHighlight J'ai l'erreur: undefined n'est pas un objet (en évaluant 'this.props.navigator.push'). Ci-joint les captures d'écran de l'écran d'accueil et l'erreur (après avoir cliqué sur PAGE STATS), et au-dessous est le code (j'ai inclus un commentaire pour où je crois que l'erreur se produit):

import React, { Component } from 'react'; 
import {AppRegistry,StyleSheet,TouchableHighlight,Navigator,Text,View} from 'react-native'; 

class Navi extends Component { 
    render() { 
    return (
     <Navigator 
     initialRoute={{ name: 'main' }} 
     renderScene={this.renderScene.bind(this)} 
     /> 
    ); 
    } 
    renderScene(route, navigator) { 
    if(route.name == 'main') { 
     return <Main navigator={navigator} /> 
    } 
    if(route.name == 'stats') { 
     return <Stats navigator={navigator} /> 
    } 
    } 
} 

export default class Main extends Component { 
    // THINK THE ERROR IS HERE 
    navigate(routeName) { 
    this.props.navigator.push({ 
     name: routeName 
    }); 
    } 
    render() { 
    return (
     <View style={styles.container}> 
     <Text style={styles.welcome}> 
      Main 
     </Text> 
     <TouchableHighlight onPress={this.navigate.bind(this, "stats")}> 
      <Text>TO STATS PAGE</Text> 
     </TouchableHighlight> 
     </View> 
    ); 
    } 
} 

class Stats extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <Text style={styles.welcome}> 
      Stats 
     </Text> 
     <TouchableHighlight onPress={()=>{this.props.navigator.pop()}}> 
      <Text>BACK</Text> 
     </TouchableHighlight> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: {marginTop:20,flex: 1,justifyContent: 'center',alignItems: 'center', 
    backgroundColor: '#F5FCFF',}, 
    welcome: {fontSize: 20,textAlign: 'center',margin: 10,}, 
}); 

AppRegistry.registerComponent('navi',() => Navi); 

Home Screen

Error when touching to stats page, using expo

Answer 1

Les gars je l'ai trouvé le meilleur !!! Le correctif est Navi devrait être exporté pas principal ...