web-dev-qa-db-fra.com

Réagir natif, NavigatorIOS, indéfini n'est pas un objet (évaluer 'this.props.navigator.Push')

J'essaie d'utiliser NavigatorIOS donc dans mon index.ios.js j'ai:

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

Et puis dans le 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;

Le problème que j'ai est que lorsque je clique sur la TouchableHighlight déclenchant onPress(), j'obtiens une erreur:

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

Donc, il semble qu’il ne trouve pas la navigator dans les accessoires, mais le navigateur devrait être passé par NavigatorIOS?

De plus, il semble que le composant Home ait this.props.navigator selon l'image:

enter image description here

Des allusions?

J'ai trouvé quelques liens (des personnes ayant exactement le même problème, mais cela n'a pas aidé):

javascriptiosreact-nativenavigator
8
manosim

Puisque vous utilisez ES6, vous devez lier 'this'.

Par exemple: onPress={this.onPress.bind(this)}

Edit: Encore une autre méthode que j’utilise plus récemment consiste à utiliser une fonction de flèche sur la fonction elle-même, car elles lieront automatiquement la variable this extérieure.

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

Vous pouvez lier la fonction à ceci dans la variable constructor.

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

Ensuite, utilisez-le pour un rendu sans reliure.

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

Cela a l'avantage de pouvoir être utilisé plusieurs fois et de nettoyer votre méthode de rendu.

1
Anil