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

admin管理员组

文章数量:1426913

I'm trying to use NavigatorIOS so in my index.ios.js I 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 then in the 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 to the NavigatorIOS . Press here!</Text>
        </TouchableHighlight>
      </View>
    );
  }
};

module.exports = Home;

The issue I have is that when I click on the TouchableHighlight triggering onPress(), I am getting an error:

"Error: undefined is not an object (evaluating 'this.props.navigator')

So it seems that it can't find the navigator from props but the navigator should be passed by NavigatorIOS?

Also it seems that the Home Component has this.props.navigator as per image:

Any hints?

I found a couple of links (people having exactly the same problem but that didn't help):

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

I'm trying to use NavigatorIOS so in my index.ios.js I 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 then in the 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 to the NavigatorIOS . Press here!</Text>
        </TouchableHighlight>
      </View>
    );
  }
};

module.exports = Home;

The issue I have is that when I click on the TouchableHighlight triggering onPress(), I am getting an error:

"Error: undefined is not an object (evaluating 'this.props.navigator')

So it seems that it can't find the navigator from props but the navigator should be passed by NavigatorIOS?

Also it seems that the Home Component has this.props.navigator as per image:

Any hints?

I found a couple of links (people having exactly the same problem but that didn't help):

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

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

• javascript
• ios
• react-native
• navigator

Share Improve this question Follow edited May 23, 2017 at 11:33 CommunityBot 111 silver badge asked Jul 8, 2015 at 21:21 manosimmanosim 3,6801313 gold badges4747 silver badges6868 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 20

Since you're using ES6 you need to bind 'this'.

For example: onPress={this.onPress.bind(this)}

Edit: Yet another way that I've been using more recently is to use an arrow function on the function itself, since they will automatically bind the outside this.

onPress = () => {
  this.props.navigator.push({
    title: 'Routed!',
    component: Park
  });
};

You can bind the function to this in the constructor.

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

Then use it when rendering without binding.

render() {
    return (
        <TouchableHighlight onPress={this.onPress} style={styles.button}>
            <Text>Welcome to the NavigatorIOS. Press here!</Text>
        </TouchableHighlight>
    );
}

This has the advantage of being able to be used multiple times and also clean's up your render method.

本文标签：