Reagieren Nativen, NavigatorIOS, undefined ist kein Objekt (Evaluierung dieser.Requisiten.navigator.push')

Ich versuche zu verwenden NavigatorIOS also in meinem index.ios.js ich habe:

'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;

Und dann in die 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;

Das Problem, das ich habe ist, dass wenn ich auf den TouchableHighlight auslösen onPress() ist, erhalte ich eine Fehlermeldung:

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

So scheint es, dass es nicht finden können, die navigator von Requisiten, aber den navigator übergeben werden sollen, durch NavigatorIOS?

Scheint es auch, dass die Home Komponente hat this.props.navigator wie pro Bild:

Reagieren Nativen, NavigatorIOS, undefined ist kein Objekt (Evaluierung dieser.Requisiten.navigator.push')

Irgendwelche Tipps?

Fand ich ein paar links (die Leute haben genau das gleiche problem, aber das hat nicht geholfen):

InformationsquelleAutor manosim | 2015-07-08
  1. 20

    Da Sie mit ES6 Sie zu binden, müssen 'diese'.

    Beispiel: onPress={this.onPress.bind(this)}

    Edit: Noch eine weitere Möglichkeit, die ich habe mit vor kurzem ist die Verwendung von einem Pfeil Funktion auf die Funktion selbst, da Sie automatisch binden, die außerhalb this.

    onPress = () => {
  this.props.navigator.push({
    title: 'Routed!',
    component: Park
  });
};
    • Das ist richtig!!!! Dachte, es hatte zu tun mit NavigatorIOS! Vielen Dank Dave!
    • Wenn Sie mit ES7 Dekorateure, können Sie auch autobind: github.com/andreypopp/autobind-decorator
    • Vielen Dank, es war hilfreich
    • funktionierte bei mir auch, und vielen Dank!
    • Wir müssen dies tun, in jeder Funktion, die wir in eine Klasse?
    • Gut, wenn Ihr die Funktion nutzen muss this dann ja, müssen Sie entweder verwenden Sie Klassen-Eigenschaften (was ich hier gezeigt) oder verwenden Sie bind im Konstruktor.

    InformationsquelleAutor Dave Sibiski
  2. 1

    Können Sie binden Sie die Funktion in der constructor.

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

    Dann verwenden, wenn das Rendern ohne Bindung.

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

    Dies hat den Vorteil, dass Sie mehrfach verwendet werden und auch clean up your render-Methode.

    InformationsquelleAutor Anil
Schreibe einen Kommentar