React-native-router-flux: Forcer le rendu de la scène après la pop

Merci pour ta réponse mais ça ne marche pas ;)
Il ne rafraîchit pas la vue précédente...

Je suppose qu'il devrait l'actualiser si quelque chose est modifié dans son état. Donc, définissez une valeur aléatoire dans le rafraîchissement

Le 09 avril 2016, à 09h51, rtrompier [email protected] a écrit :

Merci pour ta réponse mais ça ne marche pas ;)
Il ne rafraîchit pas la vue précédente...

-
Vous recevez ceci parce que vous êtes abonné à ce fil.
Répondez directement à cet e-mail ou consultez-le sur GitHub https://github.com/aksonov/react-native-router-flux/issues/465#issuecomment -207737400

Quelqu'un pourrait-il me dire comment actualiser après Actions.pop() ?

Encore une fois, vous devez changer l'état du composant précédent pour être actualisé. C'est ainsi que fonctionne l'API NavigationExperimental.

@aksonov J'ai le même problème que @helloworld123456 et @rtrompier . Mon flux de navigation se présente comme suit :

Scène A => Scène B => Scène C

Lorsque je passe de C à B, je dois restituer la scène B. Je vois que @Elyx0 a suggéré d'utiliser Actions.pop(); Actions.refresh(); J'ai deux questions :

1. Est-ce que l'appel de Actions.refresh() restituera la scène C ou B ?
2. Est-il possible de remplacer le gestionnaire onPress du bouton de retour dans la barre de navigation ? Cela ne semble pas possible après avoir regardé le code.

1. Il devrait rafraîchir B, mais pourquoi ne pas le tester et le découvrir !
2. Utilisez renderBackButton pour transmettre votre propre bouton de retour, onPress personnalisé et tout.

Compris - merci

@samdturner pouvez-vous me dire comment?

Merci

@alfan2305

Actions.pop();
Actions.refresh();

qu'en est-il dans le navBar ? Ne devrions-nous pas avoir un refresh=true sur le Scene . Sinon, je dois remplacer le onPress pour le backButton par une fonction qui appelle les deux appels ci-dessus.

@ssomnoremac Quel est le problème avec le remplacement du bouton ? Assez simple à faire. Si ce problème était plus populaire, je dirais que nous ajoutons la fonctionnalité, mais cela semble être un cas limite.

@cridenour Je pense que cela dépasse le cadre de cette question d'avoir la possibilité de restituer une scène lors d'un changement d'itinéraire. Dans mon cas, je souhaite revenir d'une séquence d'enregistrement et réinitialiser l'état de l'enregistrement dans mon magasin Redux en déclenchant une action sur le rendu au lieu d'accrocher la réinitialisation au bouton de retour. Existe-t-il une meilleure façon d'y parvenir?

Je pense que votre composant d'enregistrement recevrait le changement en écoutant redux, n'est-ce pas? Ou est-ce que le problème est que la scène ne s'affiche pas à nouveau après avoir reçu de nouveaux accessoires lorsqu'un autre composant repose sur le dessus ?

Je veux dire que nous fournissons un onBack donc lors de la définition de la scène d'enregistrement devrait être aussi simple que

const refreshOnBack = () => { Actions.pop(); Actions.refresh(); }

...
<Scene key="registration" component={Registration} onBack={refreshOnBack} />
...

merci, je ne connaissais pas onBack car j'utilise l'exemple détaillé comme doc.

Aucun problème. Jetez certainement un coup d'œil à https://github.com/aksonov/react-native-router-flux/blob/master/docs/API_CONFIGURATION.md car il y a beaucoup de flexibilité quand vous allez "hors livre" :)

Bonjour gars,
Tout d'abord : merci à tous pour vos idées, elles sont vraiment utiles car je suis assez novice dans le codage React & Javascript.

Je viens d'essayer la solution "refreshOnBack" de @cridenour : malheureusement je suis tombé sur quelques difficultés.

Maintenant, le bouton ne fait rien. Je reste juste sur ma scène "C" (en référence à l'exemple @ssomnoremac ) même si le bouton s'est mis en surbrillance. Si je viens de définir :
const refreshOnBack = () => { Actions.pop(); }
J'ai le comportement attendu sans mise à jour de ma vue parent.

Qu'est-ce que je rate ? :/

J'ai les mêmes résultats que @Brokray

Si vous déboguez à distance, voyez-vous une erreur dans la console ?

@cridenour aucune erreur dans la console.
Y a-t-il quelque chose que je puisse me connecter à la console pour comprendre ce qui se passe ? Quelque chose du réducteur peut-être ?
Le réducteur est encore un peu un mystère pour moi.

Merci.

Hmm! Essayez peut-être de faire le rafraîchissement en premier.

Actions.refresh({key: 'yourSceneKey'}); Actions.pop();

Merci pour votre aide @cridenour : je viens d'essayer votre idée mais malheureusement ça ne marche pas non plus. Je passe de C à B sans aucun problème mais "B" n'a pas changé.
Il semble que le problème vienne de la méthode refresh() : même si je mets un bouton de rafraîchissement sur la scène 'B' (appel à Actions.refresh() ) rien ne se passe.

@jholton Je ne sais pas si ça peut t'aider mais : j'ai trouvé un moyen personnalisé de mettre à jour ma scène :
J'ai un réducteur pour chaque scène (B & C), lorsque j'appelle mon action POST dans 'C', mes deux réducteurs attrapent l'appel, C fait ce qu'il doit faire et B définit une variable d'état ' mise à jour' à true .
De cette façon, dans le "ComponentWillReceiveProps" de B, je teste 'update', et appelle à nouveau ce dont j'ai besoin pour rafraîchir la scène.

Si quelqu'un a plus d'idées sur le problème de Actions.refresh() , n'hésitez pas !
Merci.

@Brokray Intéressant que cela n'ait pas fonctionné - mais vous avez quand même la meilleure solution. Je ne crois pas qu'il faille essayer d'utiliser le système de navigation pour passer l'état de l'application - je m'en tiens toujours aux magasins de flux.

@Brokray si ce n'est pas trop

@cridenour Oui, je ne veux pas passer l'état de l'application en soi. Je veux juste que la scène B soit restituée.
Dans la scène B, j'affiche des données de par base de données. Dans la scène C, j'ai un formulaire qui ajoute des données à la base de données. Lorsque l'utilisateur revient à la scène B, je souhaite simplement que toutes les méthodes de cycle de vie (par exemple, getInitialState, componentWillMount, etc.) se déclenchent afin que les données nouvellement ajoutées soient récupérées et affichées. Ces méthodes de cycle de vie ne se déclenchent pas.

@jholton Correct, et c'est par conception de React, pour le meilleur ou pour le pire. Je vous suggère fortement d'essayer une implémentation de flux (beaucoup de gens aiment redux, j'utilise personnellement Alt) et de gérer les données là-bas. De cette façon, lorsque vous mettez à jour les données, le composant sera restitué (cela signifie réexécuter render() ) et ne dépendra pas de l'initialisation du composant. De nombreux problèmes de réaction dans React deviennent beaucoup plus faciles une fois que vous éloignez la couche de données des composants (et qu'ils ne font que lire les données et les afficher).

Cela dit, Actions.refresh() ne provoquera que de nouveaux accessoires et un nouveau rendu (encore une fois, juste render() ) mais n'appellera pas componentWillMount, etc.

@jholton Eh bien, comme l' a dit
@cridenour Merci encore pour votre aide !

@Brokray Ouais, je plonge maintenant dans les tutoriels Redux. Je reviendrai sur ce fil lorsque je pourrai discuter de flux/redux plus intelligemment. Merci.

vais-je réussir à mettre à jour les accessoires mais lorsque j'essaie de passer à nouveau à la vue suivante, cela me donne une erreur
ce code est écrit dans l'écran de réglage de moi
Actions.pop();
Actions.refresh({clé : 'pageOne', nom : 'wwwww'});

Seul cela fonctionnera et mettra à jour la vue, mais lorsque j'essaie d'aller à nouveau à l'écran de réglage, cela me donne une erreur

vais-je enfin le résoudre en appelant un rafraîchissement vide avec des accessoires après un délai
Actions.popTo('pageOne');
setTimeout(() => {
Actions.refresh({nom:'zzzzar'});
console.log("zzzz");
}, dix);

@washaq : Cela a fait l'affaire pour moi

@ ronyv89 glade ça marche pour vous, quelqu'un peut-il m'aider à ce sujet? " https://github.com/facebook/react-native/issues/9280 "

Actions.pop(); Actions.refresh();
rafraîchissez simplement la page mais ne revient pas à la scène précédente.

Ce serait bien si les méthodes Actions pouvaient être promises afin que vous puissiez les enchaîner comme

Actions.pop().then(Actions.refresh()).

ou

Actions.pop().refresh()

@israrhnrtech et @tuneZola ne fonctionnent pas si vous voulez appeler l'actualisation du précédent, vous devez l'appeler après un délai, puis il sera appelé correctement comme ça

Actions.pop();
setTimeout(() => {
Actions.refresh({name:'zzzzar'});
console.log("zzzz");
}, 10);

Tout d'abord merci pour la réponse @tuneZola et @washaq .
Actions('pageOne');
setTimeout(() => {
Actions.refresh({nom:'zzzzar'});
console.log("zzzz");
}, dix);

ce code fonctionne très bien..
Merci encore ..

@israrhnrtech pas de problème mec, je trouve que beaucoup de succès et de sentiers lol, ça a l'air simple, mais quand

Je suis confronté au même problème, sur mes scènes :

A => B

sur BI, modifiez l'état de mon magasin redux, mais lorsque je fais un Router.pop() , componentWillReceiveProps n'est pas déclenché sur A.

Mon router.pop vit localement à l'intérieur de la page B (n'utilise pas la barre de navigation par défaut), donc

Router.pop()
Router.refresh()

ne fonctionne pas, définir un délai d'attente ne fonctionne pas non plus, des idées sur la façon d'y parvenir?

je ne mettrai à jour que lorsque vous passerez vos accessoires que vous souhaitez modifier, c'est-à-dire

Actions.pop();
setTimeout(() => {
Actions.refresh({name:'zzzzar'});
console.log("zzzz");
}, 10);

dans cela, je passe le nom en tant qu'accessoires dans ma vue principale, ce qui signifie que si j'utilise this.props.name pour mettre à jour le texte, alors il est mis à jour, vous devez passer l'état mis à jour en tant qu'accessoires dans l'actualisation, car c'est ainsi que la vue sait qu'elle est mise à jour.
J'espère que cela vous aidera

Pour moi, l'application a fonctionné :
navigator.replacePreviousAndPop(previousRoute);

@phpscrpt , pouvez-vous en dire plus avec quelques codes sur son fonctionnement ?

@israrhnrtech désolé c'est pour le composant Navigator

@washaq La solution de délai d'attente, telle

backAndRefresh(){

Actions.pop();
setTimeout(() => {
Actions.refresh({nom:'zzzzar'});
console.log("zzzz");
}, dix);

}

RETOURNER ET RAFRAICHIR

Le composantDidMount sur la page que je souhaite actualiser n'est pas appelé.

Est-ce que j'ai raté quelque chose ?

Merci!

@ivansifrim avez-vous trouvé une solution pour cela ?
nous essayons également de trouver un moyen de déclencher une action après avoir atterri sur l'écran

Cela fonctionne pour moi : Actions.pop({ refresh : {} });
Il affiche l'écran actuel et actualise l'écran parent.

@JeroenNelen - Je ne l'ai pas encore fait mais je vais essayer ce que @Bertjuhh a suggéré

Une solution au problème évoqué ?

Cela fonctionne bien pour moi:

const refreshOnBack = () => { Actions.pop({ refresh: {} }); }
...
// child scene
<Scene key="settings" component={SettingsScreen} onBack={refreshOnBack}/>
...

Dans une application simple que j'ai récemment créée, j'ai travaillé comme ceci (ce code se trouve dans mon fichier de routeur au-dessus de l'exportation):

Actions.pop = () => Actions.NAME_OF_PREVIOUS({ type: ActionConst.RESET });

Vous devrez faire une logique conditionnelle dans la fonction que vous utilisez pour remplacer pop . A parfaitement fonctionné dans mon cas (d'accord, cela ne me dérange pas la transition arrière alternative lors de l'utilisation de ActionConst.RESET ). Rapide et méchant.

Y a-t-il finalement quelque chose qui fonctionne bien ici ? Aucune des propositions ci-dessus ne fonctionne vraiment...

+1

@ivansifirm cela devrait fonctionner pour la dernière fois.

même problème ici, très étrange.
parfois ça marche, parfois ça ne marche pas.

Voici mon code. (Dans mon cas, il y a les scènes A et B, A=>B en naviguant, B=>A en poping)

Scène A :
componentWillReceiveProps(nextProps) { if (this.props.test !== nextProps.test) { this._getUser() // I need call this func after pop } }
Scène B

NavigationActions.pop({refresh:{test:true}})

Qu'est-ce qui ne va pas chez moi ?
Merci.

NavigationActions.pop({refresh:{test:true}})

pouvez-vous le changer en

NavigationActions.pop({refresh:{test:!test}})

Le mar. 20 juin 2017 à 19:29, MobileStar [email protected]
a écrit:

même problème ici, très étrange.
parfois ça marche, parfois ça ne marche pas.

Voici mon code. (Dans mon cas, il y a scène A et B, A=>B en naviguant,
B=>A en sautant)

Scène A :

componentWillReceiveProps(nextProps) {
if (this.props.test !== nextProps.test) {
this._getUser() // J'ai besoin d'appeler cette fonction après pop
}
}

Scène B

NavigationActions.pop({refresh:{test:true}})

Qu'est-ce qui ne va pas chez moi ?
Merci.

-
Vous recevez ceci parce que vous êtes abonné à ce fil.
Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/aksonov/react-native-router-flux/issues/465#issuecomment-309945049 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/AExqB3CZM4U1yuwKslfuBj88uVVJulGtks5sGIAbgaJpZM4H_0pN
.

@nikitph Merci pour votre aide.
Oui, j'ai essayé avec.
Mais componentWillReceiveProps ne se déclenche pas toujours après pop.
Pourriez-vous me faire savoir quand componentWillReceiveProps est déclenché ou qu'une autre fonction de cycle de vie est déclenchée après pop?
Salutations.

@SelfnessAid ahh maintenant je me souviens pourquoi j'ai renoncé à résoudre ce problème. J'avais un problème similaire. "Mais componentWillReceiveProps ne se déclenche pas toujours après pop." Je pense avoir contourné le problème en faisant en sorte que l'index d'une vue glissable que j'ai sur la page cible entraîne l'actualisation. oui c'est nul mais je résolve mon problème.

J'ai compris quelque chose. Je ne pense pas vraiment qu'il soit propre du tout, mais pour moi, il fait le travail, alors le voici. (J'utilise Redux pour le faire)

J'avais besoin d'appeler une fonction fetch chaque fois que je faisais un Action.scene() ou un Action.pop() . Cette récupération a été initialement appelée dans la méthode componentWillMount mais comme elle n'est pas appelée lors de l'utilisation de Action.pop() j'ai changé tous mes appels Action.scene() et Action.pop() en 2 fonctions personnalisées qui sont des actions qui signifie que j'ai plus de conteneurs redux que je devrais normalement mais hein :/. Alors les voici :

const goTo = (scene, label, sceneParams = {}, pushed = true) => ( // Equivalent of `Action.scene()`
   (dispatch) => {
     dispatch(setAppLabel(scene, label, sceneParams, pushed)); // I'm storing some infos about the scene in my store. Will be used in custom `pop()` later.
     mapSceneToAction(scene, dispatch, sceneParams); // // Calls the function initially used in the componentWillMount. I'll show a sample further
     Actions[scene](sceneParams);
   }
);

const pop = () => (  // Equivalent of `Action.pop()`
   (dispatch, getState) => {
     Actions.pop();
     mapSceneToAction(getState().sceneReducer.previousScene, dispatch, getState().sceneReducer.previousScene.itemProps); // Retrieving some infos stored in the store during `goTo()`
   }
);

Et voici à quoi ressemble mapSceneToAction() :

const mapSceneToAction = (scene, dispatch, itemProps) => {
  switch (scene) {
    case 'events':
      dispatch(fetchEvents()); // Or any other action :P
      break;
    case 'anyScene':
      dispatch(anyAction(withAnyParams));
      break;
    default:
  }
};

C'est un peu délicat, lourd et probablement pas vraiment propre, mais depuis que j'utilise cette méthode, j'ai réussi à résoudre tous les problèmes que j'avais.

Passer un accessoire de fonction à la scène suivante.
Actions.VotreRoute({ onPress: () => setState.. });

Ensuite, sur la scène suivante, appelez la fonction prop
this.props.onPress();

@ bethuel11 Ceci restitue le composant dans une boucle. Pas une bonne solution cependant

j'ai trouvé une astuce simple...

état actuel / page actuelle =>

Actions.pop();
setTimeout(() => {
Actions.refresh({
isRefresh : vrai,
});
}, 0);

état antérieur / page => rendu intérieur ajouter la condition ci-dessous,

if(this.props.isRefresh){
Actions.refresh({
isRefresh : faux,
});
// si vous appelez set state ici, il se restituera automatiquement...
this.setState({isloading:true});

Merci.
}