导航器：无法读取属性＆＃39;推送＆＃39;未定义的

Question

我的react-native项目有问题。项目结构如下：

-app
--components
---poi
----full.js
----list.js
----new.js
main.js

main.js

import React, {
  Component
} from 'react';
import {
  View,
  ScrollView,
  Text,
  StatusBar,
  Navigator,
  AsyncStorage,
  StyleSheet
} from 'react-native';
import TabView from 'react-native-scrollable-tab-view';
import Icon from 'react-native-vector-icons/Ionicons';
import Toolbar from './common/toolbar';
import TextField from './common/textfield';

import App from './app';
import NewPoi from './components/poi/new';
import Poi from './components/poi/full';
import ListPoi from './components/poi/list';
import Login from './components/login/index';

 console.disableYellowBox = true;

 var ROUTES = {
  login: Login,
  app: App,
  listPoi: ListPoi,
  poi: Poi
 }
export default class Main extends Component {

  constructor(props) {
    super(props);
      ...
  }
  componentDidMount(){
   ...
  }

  renderScene(route, navigator) {
    let Component = ROUTES[route.name];
    return <Component route={route} navigator={navigator}/>;
  }

  render() {
    return(
       <Navigator
          style={styles.container}
          initialRoute={{ name: 'login' }}
          renderScene={ this.renderScene.bind(this) }
          configureScene={ () => {return Navigator.SceneConfigs.FloatFromRight;} }
        />
    );
  }
}

应用/组件/ POI / list.js

import React, { Component } from 'react';
import {
  View,
  Text,
  TouchableHighlight,
  Navigator,
  AsyncStorage,
  StyleSheet,
  ListView
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import TextField from '../../common/textfield';
import Button from '../../common/button';
import Toolbar from '../../common/toolbar';
import Main from '../../main';
import Poi from './full';


export default class ListPoi extends Component {
  constructor(props) {
    super(props);

    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) =>  row1 !== row2,
      }).cloneWithRows([])
    };
  }
  componentDidMount() {
      ...
    }

    renderPoi(poiArray) {
      return(
        <TouchableHighlight onPress={this.onListPress.bind(this)}>
        <View style={styles.lists}>
          <View style={styles.number} >
            <Text style={styles.poiNo} >{poiArray[0]}</Text>
          </View>
          <View style={styles.poiDetail} >
            <Text style={styles.poiName} >{poiArray[1]}</Text>
          </View>
          <View style={styles.icon}>
            <Icon name="chevron-right" size={30} color="#B3B3B3" />
          </View>
        </View>
        </TouchableHighlight>
      );
    }
    onListPress(){
      console.log(this);
      this.props.navigator.push({
          name: 'poi'
        });
    }
  render(){
    return(
      <View style={styles.container}>
        <View style={styles.toolbarContainer}>
          <Toolbar title='List of POI' style={styles.toolbar} />
        </View>
        <View style={[styles.poiContent, styles.listContainer]} >
            <ListView
            dataSource = {this.state.dataSource}
            enableEmptySections = {true}
            renderRow = {this.renderPoi.bind(this)}
            style = {styles.listView}
          />
        </View>
      </View>
    );
  }
}

应用/组件/ POI / full.js

import React, { Component } from 'react';
import {
  View,
  Text,
  Dimensions,
  StyleSheet
} from 'react-native';
import MapView from 'react-native-maps';
import Toolbar from '../../common/toolbar';
import Main from '../../main';
import ListPoi from './list';

var { width, height } = Dimensions.get('window');
const ASPECT_RATIO = width / height;
const LATITUDE = 27.687073;
const LONGITUDE = 85.335634;
const LATITUDE_DELTA = 0.005;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
let id = 0;


export default class Poi extends Component {

  constructor(props) {
    super(props);

    this.state = {
      region: {
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
      },
      markers: []
    };
  }

  render() {
    return(
      <View style={styles.container}>
        <View style={styles.toolbarContainer}>
          <Toolbar title='Add New POI' style={styles.toolbar} />
        </View>
        <View style={styles.mapview}>
          <MapView style={styles.map}
            region={this.state.region}
            >
            <MapView.Marker
           coordinate={this.state.region}
            />
          </MapView>
        </View>
        <View style={styles.content}>
          <Text>Full details on POI</Text>
        </View>
      </View>
    );
  }
}

目前，该项目显示 POI列表，并且我已为每个列表使用 TouchableHighlight 。按下列表时，它应该呈现 <Poi /> 组件。

onListPress()事件正在抛出无法读取属性＆＃39;推送＆＃39;未定义错误。我错过了什么吗？

由于