React本地问题：undefined不是一个对象（evaluationg'this.props.navigator.push'）

Question

我是一个反应本机新手，我试图在屏幕之间导航......我跟着一个简单的教程，不幸的是，当我按下“统计页面”TouchableHighlight我得到的错误：undefined不是一个对象（评估'this.props.navigator.push'）。附上主屏幕和错误（在点击TO统计信息页）的截图，和下面的代码是（我包括了，我相信发生错误的注释）：

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

伙计们我觉得它是最好的！修复是Navi应该导出不主要...