Rating (this.props.navigator) Undefined is not an object

Question

I get this error even though I am passing correctly in the navigator.

MySetup this way: Navigator Home → FirstView (onBtnPress) → Details

I get an error when I call this.navigator.push on the firstView page.

Main file:

import React, { Component, PropTypes } from 'react';

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

class app extends Component{

    constructor(props) {
        super(props); 
    }


   navigatorRenderScene(route, navigator) {
        return <route.component navigator={navigator}/>

  }
     configureScene() {
    return Navigator.SceneConfigs.VerticalDownSwipeJump;
  }


    render() {

      return (
     <Navigator
        style={styles.container}
        initialRoute= {{component: MainMapView}}
        renderScene={this.navigatorRenderScene}/>
      );
    }
}


const styles = StyleSheet.create({
  container: { flex: 1, flexDirection: 'column', padding: 20 }
});

AppRegistry.registerComponent('app', () => app);

The first component:

    <ActionButton buttonColor="rgba(30,144,255,1)" style={styles.fabIcon}
                  onPress={this.fabPress}>
    </ActionButton>


  fabPress() {
  this.props.navigator.push({
      component : DetaislView
    });
  }

The error occurs on fabPress.

Any ideas on what I'm doing wrong?

Answer 1

try this in FirstComponent.js :

class FirstComponent extends Component {

    constructor(props) {
        super(props); 
        this.fabPress = this.fabPress.bind(this);
    }

    // ... rest of the code remains the same

---

Why do we need this?

, React.createClass (ES5), . extend ( ES6), env.

fabPress , env ; , this env. this this.props.navigator:)

Answer 2

, - , , .

, .

  theFunctionName() {
         // your code
  }

, ​​ .

  theFunctionName = () => {
         // your code
  }

bind(this).

, , . ( )

Answer 3

In my case, I went through the navigator:

  onPress={this.fabPress(navigator)}

  fabPress(navigator) {
    navigator.push({component: DetaislView});
  }