javascript - React Native, NavigatorIOS, undefined is not an object (evaluating 'this.props.navigator.push') -

i'm trying use navigatorios in index.ios.js got:

'use strict';  var react = require('react-native'); var home = require('./app/components/home');  var {   appregistry,   stylesheet,   navigatorios } = react;  var styles = stylesheet.create({   container:{     flex: 1,     backgroundcolor: '#111111'   } });  class exampleapp extends react.component{   render() {     return (       <navigatorios         style={styles.container}         initialroute={{           title: 'example',           component: home         }} />     );   } };  appregistry.registercomponent('exampleapp', () => exampleapp); module.exports = exampleapp; 

and in home.js:

'use strict';  var react = require('react-native'); var park = require('./park');  var {   view,   stylesheet,   text,   touchablehighlight } = react;  var styles = stylesheet.create({ ... });  class home extends react.component{   onpress() {     this.props.navigator.push({       title: 'routed!',       component: park     });   }    render() {     return (       <view style={styles.maincontainer}>         <text> testing react native </text>         <touchablehighlight onpress={this.onpress} style={styles.button}>           <text>welcome navigatorios . press here!</text>         </touchablehighlight>       </view>     );   } };  module.exports = home; 

the issue have when click on touchablehighlight triggering onpress(), getting error:

"error: undefined not object (evaluating 'this.props.navigator') 

so seems can't find navigator props navigator should passed navigatorios?

also seems home component has this.props.navigator per image:

any hints?

i found couple of links (people having same problem didn't help):

• https://github.com/facebook/react-native/issues/416

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

since you're using es6 need bind 'this'.

for example: onpress={this.onpress.bind(this)}

edit: yet way i've been using more use arrow function on function itself, since automatically bind outside this.

onpress = () => {   this.props.navigator.push({     title: 'routed!',     component: park   }); };