React-native-router-flux: Erzwinge erneutes Rendern der Szene nach dem Pop

Danke für deine Antwort, funktioniert aber nicht ;)
Es aktualisiert nicht die vorherige Ansicht ...

Ich denke, es sollte es aktualisieren, wenn etwas innerhalb seines Zustands geändert wird. Legen Sie also einen zufälligen Wert in der Aktualisierung fest

Am 09.04.2016 um 09:51 Uhr schrieb rtrompier [email protected] :

Danke für deine Antwort, funktioniert aber nicht ;)
Es aktualisiert nicht die vorherige Ansicht ...

—
Sie erhalten dies, weil Sie diesen Thread abonniert haben.
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an https://github.com/aksonov/react-native-router-flux/issues/465#issuecomment -207737400

Könnte mir jemand sagen, wie ich nach Actions.pop() aktualisieren kann?

Auch hier müssen Sie den Status der vorherigen zu aktualisierenden Komponente ändern. So funktioniert die NavigationExperimental API.

@aksonov Ich habe das gleiche Problem wie @helloworld123456 und @rtrompier . Mein Navigationsfluss sieht wie folgt aus:

Szene A => Szene B => Szene C

Wenn ich von C nach B springe, muss ich Szene B neu rendern. Ich sehe, dass @Elyx0 vorgeschlagen hat, Actions.pop(); Actions.refresh(); Ich habe zwei Fragen:

1. Wird der Aufruf von Actions.refresh() Szene C oder B neu rendern?
2. Ist es möglich, den onPress Handler der Zurück-Schaltfläche in der Navigationsleiste zu überschreiben? Es sieht nicht so aus, als ob es möglich wäre, nachdem man sich den Code angesehen hat.

1. Es sollte B aktualisieren, aber warum testen Sie es nicht und finden es heraus!
2. Verwenden Sie renderBackButton , um Ihren eigenen Zurück-Button, benutzerdefinierten onPress und alles, weiterzugeben.

Verstanden - danke

@samdturner kannst du mir sagen wie?

Dankeschön

@alfan2305

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

Was ist mit den navBar ? Sollten wir nicht ein refresh=true auf dem Scene . Andernfalls muss ich onPress für backButton zu einer Funktion überschreiben, die die beiden obigen Aufrufe aufruft.

@ssomnoremac Was ist falsch daran, die Schaltfläche zu überschreiben? Ziemlich einfach zu machen. Wenn dieses Problem populärer wäre, würde ich sagen, dass wir die Funktionalität hinzufügen, aber es scheint ein Randfall zu sein.

@cridenour Ich glaube, dass es den Rahmen dieser Frage Routenänderung neu zu rendern. In meinem Fall möchte ich von einer Registrierungssequenz zurückkehren und den Status der Registrierung in meinem Redux-Speicher zurücksetzen, indem ich eine Aktion beim erneuten Rendern auslöse, anstatt den Reset in die Zurück-Schaltfläche einzuhaken. Gibt es einen besseren Weg, dies zu erreichen?

Ich würde denken, Ihre Registrierungskomponente würde die Änderung erhalten, indem sie auf Redux hört, oder nicht? Oder ist das Problem, dass die Szene nach Erhalt neuer Requisiten nicht neu gerendert wird, wenn eine andere Komponente oben liegt?

Ich meine, wir stellen ein onBack also sollte die Definition der Registrierungsszene so einfach sein wie

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

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

Danke, wusste nichts von onBack da ich das detaillierte Beispiel als meine Dokumente verwende.

Kein Problem. Werfen Sie auf jeden Fall einen Blick durch https://github.com/aksonov/react-native-router-flux/blob/master/docs/API_CONFIGURATION.md, da es dort viel Flexibilität gibt, wenn Sie "aus dem Buch" gehen :)

Hallo Leute,
Zuallererst: Danke euch allen für eure Einblicke, sie sind wirklich nützlich, da ich ein ziemlicher Neuling in Reagieren und Javascript-Codierung bin.

Ich habe gerade die Lösung "refreshOnBack" von @cridenour ausprobiert : leider bin ich auf einige Schwierigkeiten gestoßen.

Jetzt tut der Knopf einfach nichts. Ich bleibe einfach in meiner "C" -Szene (in Bezug auf das @ssomnoremac- Beispiel), auch wenn die Schaltfläche sich selbst hervorgehoben hat. Wenn ich nur setze:
const refreshOnBack = () => { Actions.pop(); }
Ich habe das erwartete Verhalten ohne ein Update meiner Elternansicht.

Was vermisse ich ? :/

Ich habe die gleichen Ergebnisse wie @Brokray

Wenn Sie remote debuggen, sehen Sie einen Fehler in der Konsole?

@cridenour keine Fehler in der Konsole.
Kann ich mich in die Konsole einloggen, um herauszufinden, was los ist? Etwas vom Reduzierstück vielleicht?
Der Reduzierer ist mir immer noch ein Rätsel.

Vielen Dank.

Hmm! Vielleicht versuchen Sie es zuerst mit der Aktualisierung.

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

Danke für deine Hilfe @cridenour : Ich habe deine Idee gerade ausprobiert aber leider funktioniert sie auch nicht. Ich gehe ohne Probleme von C nach B, aber "B" hat sich nicht geändert.
Es scheint, dass das Problem von der refresh() Methode herrührt: Selbst wenn ich eine Aktualisierungsschaltfläche in die 'B'-Szene setze (aufrufe von Actions.refresh() ), passiert nichts.

@jholton Ich weiß nicht, ob es dir helfen kann, aber: Ich habe eine benutzerdefinierte Möglichkeit gefunden, meine Szene zu aktualisieren:
Ich habe einen Reducer für jede Szene (B & C), wenn ich meine Aktion POST in 'C' aufrufe, fangen beide meine Reducer den Aufruf ab, C tut, was er tun muss und B setzt eine Zustandsvariable ' update' auf true .
Auf diese Weise teste ich in den "ComponentWillReceiveProps" von B 'update' und rufe erneut auf, was ich zum Aktualisieren der Szene brauche.

Wenn jemand mehr Einblicke in das Actions.refresh() Problem hat, zögern Sie nicht!
Vielen Dank.

@Brokray Interessant, dass es nicht funktioniert hat - aber du hast sowieso die bessere Lösung. Ich glaube nicht daran, das Navigationssystem zu verwenden, um den App-Status zu übergeben - ich bleibe immer bei Flux Stores.

@Brokray, wenn es nicht zu viel Mühe macht, können Sie ein Beispiel geben? Wie haben Sie einen Reduzierer für eine einzelne Szene? Ich habe die gesamte Dokumentation gelesen, aber es ist an dieser Stelle ein bisschen überfordert.

@cridenour Ja, ich möchte den App-Status nicht per se übergeben. Ich möchte nur, dass Szene B neu gerendert wird.
In Szene B zeige ich einige Daten aus der Datenbank an. In Szene C habe ich ein Formular, das Daten zur Datenbank hinzufügt. Wenn der Benutzer zu Szene B zurückkehrt, möchte ich nur, dass alle Lebenszyklusmethoden (zB getInitialState, componentWillMount usw.) ausgelöst werden, damit die neu hinzugefügten Daten abgerufen und angezeigt werden. Diese Lebenszyklusmethoden werden nicht ausgelöst.

@jholton Richtig, und das ist Guten oder Schlechten. Ich empfehle Ihnen dringend, eine Flux-Implementierung auszuprobieren (viele Leute mögen Redux, ich persönlich verwende Alt) und die Daten dort zu verwalten. Auf diese Weise wird die Komponente beim Aktualisieren der Daten neu gerendert (das bedeutet, dass render() ) und ist nicht auf die Initialisierung der Komponente angewiesen. Viele Reaktionsprobleme in React werden viel einfacher, wenn Sie die Datenschicht von den Komponenten entfernen (und sie nur Daten lesen und anzeigen).

Das heißt, Actions.refresh() verursacht nur neue Requisiten und ein erneutes Rendern (wieder nur render() ), ruft jedoch nicht componentWillMount usw. auf.

@jholton Nun, wie @cridenour sagte, verwende ich eine Flux-Implementierung (in der Tat Redux), die es Ihnen ermöglicht, Ihre Daten durch Aktionen, Status und Reducer zu verwalten. Sobald Sie mit der Flussmittelimplementierung vertraut sind, stelle ich Ihnen gerne ein Beispiel zur Verfügung!
@cridenour Nochmals vielen Dank für Ihre Hilfe!

@Brokray Ja, ich

Wird es mir bei aktualisierten Requisiten gelingen, aber wenn ich wieder versuche, zur nächsten Ansicht zu wechseln, bekomme ich einen Fehler?
Dieser Code ist in meinem Einstellungsbildschirm geschrieben
Aktionen.pop();
Actions.refresh({key: 'pageOne', name:'wwwww'});

Nur dies funktioniert und aktualisiert die Ansicht, aber wenn ich erneut versuche, zum Einstellungsbildschirm zu gehen, bekomme ich einen Fehler

werde ich es endlich lösen, indem ich nach der Verzögerung eine leere Aktualisierung mit Requisiten aufrufe?
Actions.popTo('pageOne');
setTimeout(() => {
Actions.refresh({name:'zzzzar'});
console.log("zzzz");
}, 10);

@washaq : Das hat mir

@ronyv89 Glade es funktioniert für dich kann mir jemand dabei helfen? " https://github.com/facebook/react-native/issues/9280 "

Aktionen.pop(); Aktionen.refresh();
Aktualisieren Sie einfach die Seite, gehen Sie jedoch nicht zur vorherigen Szene.

Es wäre schön, wenn Actions-Methoden basierend versprochen werden könnten, damit Sie sie wie aneinanderreihen können

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

oder

Actions.pop().refresh()

@israrhnrtech und @tuneZola funktioniert nicht, wenn Sie die Aktualisierung der vorherigen aufrufen möchten, müssen Sie sie nach einer Verzögerung aufrufen, dann wird sie ordnungsgemäß aufgerufen

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

Erstmal Danke für die Antwort @washaq .
Aktionen('pageOne');
setTimeout(() => {
Actions.refresh({name:'zzzzar'});
console.log("zzzz");
}, 10);

dieser Code funktioniert sehr gut..
Danke noch einmal ..

@israrhnrtech kein Problem Alter, ich finde, dass wirklich viele Hits und Trails lol es sieht einfach aus, aber wenn du neu auf nativ

Ich stehe in meinen Szenen vor dem gleichen Problem:

A => B

on BI meinen Redux-Speicherstatus ändern, aber wenn ich Router.pop() , wird ComponentWillReceiveProps nicht auf A ausgelöst.

Mein router.pop lebt lokal auf der B-Seite (ohne die Standard-NavBar zu verwenden), also

Router.pop()
Router.refresh()

funktioniert nicht, das Setzen eines Timeouts funktioniert auch nicht, habt ihr eine Idee, wie man das erreichen kann?

Ich werde nur aktualisieren, wenn Sie Ihre Requisiten übergeben, die Sie ändern möchten, dh

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

In diesem übergebe ich den Namen als Requisiten in meiner Hauptansicht, das heißt, wenn ich this.props.name , um den Text zu aktualisieren, dann muss er aktualisiert werden.
Hoffe das hilft dir

Bei mir hat die Anwendung funktioniert:
navigator.replacePreviousAndPop(vorherigeRoute);

@phpscrpt , können Sie mehr mit einigen Codes

@israrhnrtech Entschuldigung, es ist für die eingebaute Navigator-Komponente von

@washaq Die Timeout-Lösung, wie unten implementiert, funktioniert bei mir nicht:

zurückAndRefresh(){

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

}

GEHEN SIE ZURÜCK UND ERFRISCHEN

Die KomponenteDidMount auf der Seite, die ich aktualisieren möchte, wird nicht aufgerufen.

Verpasse ich etwas?

Vielen Dank!

@ivansifrim hast du dafür eine Lösung gefunden?
Wir versuchen auch einen Weg zu finden, eine Aktion auszulösen, nachdem wir auf dem Bildschirm gelandet sind

Das funktioniert bei mir: Actions.pop({ refresh: {} });
Es öffnet den aktuellen Bildschirm und aktualisiert den übergeordneten Bildschirm.

@JeroenNelen - habe ich noch nicht, aber ich werde versuchen, was @Bertjuhh vorgeschlagen hat

Irgendeine Lösung für das genannte Problem?

Das funktioniert bei mir gut:

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

In einer einfachen App, die ich kürzlich gemacht habe, habe ich das so umgangen (dieser Code befindet sich in meiner Router-Datei über dem Export):

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

Sie müssen in der Funktion, die Sie verwenden, um pop zu überschreiben, eine bedingte Logik ausführen. Hat in meinem Fall wunderbar funktioniert (zugegeben, mir macht der alternative Rückübergang bei der Verwendung von ActionConst.RESET nichts aus). Schnell n böse.

Funktioniert hier endlich etwas gut? Keiner der obigen Vorschläge funktioniert wirklich...

+1

@ivansifirm es sollte zuletzt funktionieren Ich habe es verwendet, erinnere mich im Refresh-Pass an die Requisiten, die du undatieren möchtest. Dh über "Name" sind die Requisiten, die ich in meiner vorherigen Ansicht aktualisieren möchte

gleiches Problem hier, sehr seltsam.
manchmal funktioniert es, manchmal funktioniert es nicht.

Hier ist mein Code. (In meinem Fall gibt es Szene A und B, A=>B durch Navigation, B=>A durch Pop)

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

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

Was ist falsch mit mir ?
Vielen Dank.

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

kannst du es ändern in

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

Am Dienstag, 20. Juni 2017 um 19:29 Uhr, MobileStar [email protected]
schrieb:

gleiches Problem hier, sehr seltsam.
manchmal funktioniert es, manchmal funktioniert es nicht.

Hier ist mein Code. (In meinem Fall gibt es Szene A und B, A=>B durch Navigieren,
B=>A durch Pop)

Szene A:

KomponenteWillReceiveProps(nextProps) {
if (this.props.test !== nextProps.test) {
this._getUser() // Ich muss diese Funktion nach dem Pop aufrufen
}
}

Szene B

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

Was ist falsch mit mir ?
Vielen Dank.

—
Sie erhalten dies, weil Sie diesen Thread abonniert haben.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/aksonov/react-native-router-flux/issues/465#issuecomment-309945049 ,
oder den Thread stumm schalten
https://github.com/notifications/unsubscribe-auth/AExqB3CZM4U1yuwKslfuBj88uVVJulGtks5sGIAbgaJpZM4H_0pN
.

@nikitph Danke für deine Hilfe.
Ja, ich habe es damit versucht.
Aber ComponentWillReceiveProps wird nicht immer nach Pop ausgelöst.
Könnten Sie mich möglicherweise wissen lassen, wenn ComponentWillReceiveProps ausgelöst wird oder eine andere Lebenszyklusfunktion nach Pop ausgelöst wird?
Grüße.

@SelfnessAid ahh jetzt erinnere ich mich, warum ich aufgegeben habe, dieses Problem zu lösen. ich hatte ein ähnliches Problem. "Aber ComponentWillReceiveProps wird nicht immer nach Pop ausgelöst." Ich denke, ich habe es umgangen, indem ich den Index einer wischbaren Ansicht, die ich auf der Zielseite habe, die Aktualisierung antreibt. Ja, es ist scheiße, aber ich bekomme mein Problem gelöst.

Ich habe etwas herausgefunden. Ich glaube nicht wirklich, dass es sauber ist, aber für mich macht es den Job, also hier ist es. (Ich benutze Redux, um dies zu tun)

Ich musste immer eine Abruffunktion aufrufen, wenn ich Action.scene() oder Action.pop() . Dieser Abruf wurde ursprünglich in der Methode componentWillMount aufgerufen, aber da er nicht aufgerufen wird, wenn Action.pop() ich alle meine Action.scene() und Action.pop() Aufrufe in 2 benutzerdefinierte Funktionen geändert, die Aktionen sind, die bedeutet, dass ich mehr Redux-Container habe, als ich normalerweise sollte, aber eh :/. Also hier sind sie:

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()`
   }
);

Und so sieht mapSceneToAction() aus:

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

Es ist ein bisschen knifflig, schwer und wahrscheinlich nicht wirklich sauber, aber seit ich diese Methode verwende, habe ich es geschafft, alle Probleme zu beheben, die ich hatte.

Übergeben Sie eine Funktionsstütze an die nächste Szene.
Actions.YourRoute({ onPress: () => setState.. });

Rufen Sie dann in der nächsten Szene die Funktion prop
this.props.onPress();

@bethuel11 Dies ist das erneute Rendern der Komponente in einer Schleife. Aber keine gute Lösung

Ich habe einen einfachen Trick gefunden...

aktueller Stand / aktuelle Seite =>

Aktionen.pop();
setTimeout(() => {
Aktionen.refresh({
isRefresh: wahr,
});
}, 0);

pervious state / page => innen rendern unter Bedingung hinzufügen,

if(this.props.isRefresh){
Aktionen.refresh({
isRefresh: falsch,
});
// Wenn Sie hier set state aufrufen, wird es automatisch neu gerendert ...
this.setState({isloading:true});

Vielen Dank.
}