3
votes

Comment revenir à l'écran précédent avec les paramètres?

Je suis sur l'écran A qui a l'état actuel de {key: 'value'}, j'ai navigué vers l'écran B

maintenant j'essaye de revenir de l'écran B à l'écran A, mais je ne le fais pas voulez perdre l'état actuel de l'écran A {key: 'value'}

une solution consiste à enregistrer les données dans AsynStorage, et à les récupérer en revenant à l'écran A, mais ce n'est pas une bonne pratique

.pop () fais-le, mais que faire si je dois revenir en arrière avec des paramètres supplémentaires?

Navigation.pop(this.props.componentId , {
                               passProps: {
                                       data : 'current',
                                       more : 'just-example'
                                     }});

le code ci-dessus, n'a pas fonctionné p >

des suggestions?

Je n'utilise aucun outil de gestion d'état comme Redux / Mobx ..

reactjs react-native react-native-navigation

4 commentaires

le code ci-dessus, n'a pas fonctionné que voulez-vous dire? At-il eu une erreur?

@Vencovsky, non, il est revenu à l'écran précédent mais sans les paramètres passés

J'utilise react-navigation sur react-native-navigation donc je ne sais pas si cela est possible. Lorsque vous accédez à la page enfant, vous pouvez simplement analyser quelque chose comme: navigate ('somePage', {parent: this}) auquel cas vous pouvez ensuite accéder au parent depuis l'enfant en appelant this.props.blah.blah.parent cela peut être une solution pour vous.

@swonder ce n'est pas possible ici

3 Réponses :

1
votes

J'ai travaillé là-dessus et j'ai réussi avec react-navigation code > .

En gros, votre composant A enverra au composant B l'état de navigation du composant A. Donc, pour le point de vue B, ce sera l'état précédent avant d'empiler le composant B.

Ainsi, lorsque le composant B navigue "retour" vers le composant A en utilisant l'état de navigation précédent, c'était comme si votre état de navigation n'avait jamais changé et vous pouviez maintenant utiliser le deuxième paramètre de naviguer pour renvoyer les paramètres au composant A.

Cet exemple simple illustre cette pratique et je pense qu'il est totalement valide et sans utilisation AsyncStorage .

// And finally in Component A again you could get data like this
function getDataFromComponentB() {
  const { navigation } = this.props;

  // It is null if no parameters are specified!
  return navigation.state.params;
}

// In Component B use this custom goBack to "pop" to last screen
function goBack(data) {
  const { navigation } = this.props;

  const { routeName, key } = navigation.getParam('prevState');

  navigation.navigate({ routeName, key, params: data });
}

1 commentaires

Je n'ai jamais travaillé avec react-native-navigation et je suis désolé de ne pas fournir de réponse spécifique avec cette bibliothèque. Ma réponse pourrait peut-être vous inciter à faire la même chose que moi.

5
votes

J'ai trouvé une bonne solution est d'envoyer une fonction de rappel avec les paramètres

dans l'écran A

Navigation.pop(this.props.componentId);
this.props.getback(true);

puis dans l'écran B, lorsque vous passez à l'écran A fire la fonction getback

  getback(success)
  {
      alert(success);
  }

  Navigation.push(this.props.componentId , { component : {
         name : "Payment",
         passProps: {
         subscription : current,
         getback: this.getback
       },
   }});

cela a bien fonctionné avec moi

0 commentaires

0
votes

Comme l'a suggéré Terrance. vous pouvez utiliser un rappel dans les accessoires et le déclencher avant de revenir à la page précédente

Source de la réponse: Réagir les propriétés Native Pass sur la fenêtre du navigateur

0 commentaires