undefined is not an object (evaluating 'this.props.navigator.push')

[SunShinewyf]

I search some references but it does not help ,next is my code
I am not sure what I am missing, have required all the dependencies.

/**
 * Copyright 2016 SunShine
 * 2016-12-18
 */

import * as React from "react";
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Navigator,
    NavigatorIOS
} from 'react-native';
import { HomeView, SpotsView, TravelsView, WriteView, UserView } from './views'

class myApp extends React.Component<any, any>{
    constructor(props: any) {
        super(props)
    }
    /**
     *页面跳转
     */
    renderView(route: any, navigator: any) {
        let routeId = route.id;
        switch (routeId) {
            case 'Home':
                return (
                    <HomeView navigator={navigator} />
                );
            case 'Spots':
                return (
                    <SpotsView {...route.params} navigator={navigator} />
                )
            case 'Travels':
                return (
                    <TravelsView {...route.params} navigator={navigator} />
                )
            case 'Write':
                return (
                    <WriteView {...route.params} navigator={navigator} />
                )
            case 'User':
                return (
                    <UserView {...route.params} navigator={navigator} />
                )
        }
    }


    render() {
        return (
            <Navigator
                initialRoute={{ id: 'Home', params: { message: 'home页面' } }}
                configureScene={(route) => {
                    if (route.sceneConfig) {
                        return route.sceneConfig
                    }
                    return Navigator.SceneConfigs.FloatFromBottom
                } }
                renderScene={(route, navigator) => this.renderView(route, navigator)}
                />
        )
    }
}

export default () => myApp

code of navigator page is next:

import * as React from 'react'
import { View, Text, Image, Touchable, TouchableOpacity, Navigator, Dimensions, StyleSheet } from 'react-native'
import * as CONST from '../../CONST'
import { HomeView } from '../../views/home/home.view'
import { SpotsView } from '../../views/spots/spots.view'
import { TravelsView } from '../../views/travels/travels.view'
import { WriteView } from '../../views/write/write.view'
import { UserView } from '../../views/user/user.view'

/**图片的统一引入 */
const homeImg = require('../../../public/index.png')
const spotsImg = require('../../../public/spots.png')
const writeImg = require('../../../public/write.png')
const travelImg = require('../../../public/travels.png')
const userImg = require('../../../public/user.png')

export class FooterBar extends React.Component<any, any>{
    constructor(props: any) {
        super(props)

    }

    /**
     *页面跳转
     */
    navigator() {
        this.props.navigator.push({
            id: 'User',
            params: {
                messgage: 'User page'
            }
        })
    }

    render() {
        return (
            <View style={[styles.footerBarContainer, { width: CONST.WIDTH }]}>
                <TouchableOpacity style={[styles.footerBarItem, { width: CONST.WIDTH / 5 }]}>
                    <Image source={homeImg} style={styles.itemImg} />
                    <Text style={styles.itemText}>首页</Text>
                </TouchableOpacity>
                <TouchableOpacity style={[styles.footerBarItem, { width: CONST.WIDTH / 5 }]}>
                    <Image source={spotsImg} style={styles.itemImg} />
                    <Text style={styles.itemText}>景点</Text>
                </TouchableOpacity>
                <TouchableOpacity style={[styles.footerBarItem, { width: CONST.WIDTH / 5 }]}>
                    <Image source={writeImg} style={styles.itemImg} />
                    <Text style={styles.itemText}>记录</Text>
                </TouchableOpacity>
                <TouchableOpacity style={[styles.footerBarItem, { width: CONST.WIDTH / 5 }]}>
                    <Image source={travelImg} style={styles.itemImg} />
                    <Text style={styles.itemText}>游记</Text>
                </TouchableOpacity>
                <TouchableOpacity style={[styles.footerBarItem, { width: CONST.WIDTH / 5 }]} onPress={this.navigator.bind(this)}>
                    <Image source={userImg} style={styles.itemImg} />
                    <Text style={styles.itemText}>我的</Text>
                </TouchableOpacity>
            </View>
        )
    }
}

the user page code:

import * as React from 'react'
import { View, Text, Image, Dimensions ,Navigator} from 'react-native'
import { FooterBar } from '../../components'

export class UserView extends React.Component<any, any>{

    constructor(props: any) {
        super(props)
    }
    render() {
        console.warn(this.props, 'uuuu')
        return (
            <View>
                <Text>this is the user page</Text>
                <FooterBar />
            </View>
        )
    }
}

I know it is the this issue but I try many ways to solve it such as add the next to constructor function

 constructor(props: any) {
        super(props)
        this.navigator = this.navigator.bind(this);
    }

but it is useless

and I even try the es6 to solve it like this:

    <TouchableOpacity style={[styles.footerBarItem, { width: CONST.WIDTH / 5 }]} onPress={()=>this.navigator()}>
                    <Image source={userImg} style={styles.itemImg} />
                    <Text style={styles.itemText}>我的</Text>
                </TouchableOpacity>

the result is same,I don't know where is wrong, who can help me to solve it

[brentvatne]

Hi there! Please post this to http://stackoverflow.com/ :)