web-dev-qa-db-fra.com

React Native Navigation const {naviguer} = this.props.navigation;

J'apprends react-native navigation https://reactnavigation.org/docs/intro/ . Je vois des exemples là-bas

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat')}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}

Je ne pouvais pas comprendre à quoi sert exactement cette ligne de code const { navigate } = this.props.navigation;

react-nativereact-navigation
11
N Sharma

la syntaxe n'a rien à voir avec React Native, elle s'appelle Affectation de la destruction dans es6/es2015

const { navigate } = this.props.navigation;

est équivalent à à l'exception de var et const.

var navigate = this.props.navigation.navigate

l'exemple sans Destructuration devrait ressembler à ceci

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => this.props.navigation.navigate('Chat')}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}
11
aeid

Incluez dans votre ServiceAction le this.props.navigation quelque chose comme ça:

<HomeScreen navigation={this.props.navigation}/>

parce que le props.navigation sont par défaut sur votre composant parent

et sur le composant HomeScreen, vous aurez accès à la navigation comme:

..
goToSignUp() {
   this.props.navigation.navigate('SignUp');
}
..

Pour moi, c'était aussi déroutant avant. À votre santé!

1
Manuel Alanis