Javascript 反应本机问题：未定义不是对象（evaluationg'；this.props.navigator.push'；）

我是一个新手，我试图在屏幕之间导航。。。我遵循了一个简单的教程，不幸的是，当我按下“ToStats页面”TouchableHighlight时，我得到了一个错误：undefined不是一个对象（评估'this.props.navigator.push'）。附件是主屏幕截图和错误（点击统计页面），下面是代码（我包括了我认为错误发生的地方的注释）：

import React，{Component}来自'React'；
从“react native”导入{AppRegistry，StyleSheet，TouchableHighlight，Navigator，Text，View}；
类Navi扩展组件{
render（）{
返回(
);
}
renderScene（路线、导航器）{
如果（route.name==“main”）{
回来
}
如果（route.name==“stats”）{
回来
}
}
}
导出默认类主扩展组件{
//我想错误就在这里
导航（路由名称）{
这个是.props.navigator.push({
姓名：routeName
});
}
render（）{
返回(
主要的
到统计页面
);
}
}
类Stats扩展组件{
render（）{
返回(
统计数据
{this.props.navigator.pop（）}>
返回
);
}
}
const styles=StyleSheet.create({
容器：{marginTop:20，flex:1，justifyContent:'center'，alignItems:'center'，
背景色：“#F5FCFF”，}，
欢迎：{fontSize:20，textAlign:'中间'，边距：10，}，
});
AppRegistry.registerComponent（'navi'，（）=>navi）；

---

伙计们，我想我是最棒的！！！修复程序是Navi应该导出而不是主

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