wake-up-neo.com

Vorherigen Bildschirm auf goBack () aktualisieren

Ich bin neu bei React Native. Wie können wir den vorherigen Bildschirm aktualisieren/neu laden, wenn Sie durch Aufruf von goBack() dorthin zurückkehren?

Nehmen wir an, wir haben 3 Bildschirme A, B, C:

A -> B -> C

Wenn Sie goBack() von Bildschirm C aus ausführen, kehren Sie zu Bildschirm B zurück, jedoch mit den alten Status/Daten. Wie können wir es auffrischen? Der Konstruktor wird nicht zum zweiten Mal aufgerufen.

9
Adnan Ali

Ja, Konstruktor wird nur zum ersten Mal aufgerufen und kann nicht zweimal aufgerufen werden.

Zuerst : Sie können den Daten-GetterSetter jedoch vom Konstruktor trennen und in eine Funktion einfügen. Auf diese Weise können Sie die Funktion an die nächste Szene weitergeben. Wenn Sie zurückgehen, können Sie die Funktion einfach aufrufen .

/ - Besser : Sie können in Ihrer ersten Szene eine Zurück-Funktion ausführen, die auch die Szene aktualisiert, während Sie zurückgehen und die Zurück-Funktion zurücklassen. Auf diese Weise würde die zweite Szene Ihre Aktualisierungsfunktion nicht kennen, was vernünftig ist.

Am besten : Sie können redux verwenden und in Ihrer zweiten Szene eine Go-back-Aktion auslösen. Dann sorgen Sie in Ihrem Reducer dafür, dass Sie zurückkehren und Ihre Szene auffrischen.

0
Bat

Hinzufügen eines API-Aufrufs in CallBack: Damit wird das Problem gelöst

componentDidMount() {
    this.props.fetchData();
    this.willFocusSubscription = this.props.navigation.addListener(
      'willFocus',
      () => {
        this.props.fetchData();
      }
    );
  }

  componentWillUnmount() {
    this.willFocusSubscription.remove();
  }
9
Mukundhan

Auf Ihrem Bildschirm wird B-Konstruktor wie Magie funktionieren :)

    this.props.navigation.addListener(
          'didFocus',
          payload => {
            this.setState({is_updated:true});
          }
    );
2
Brijesh Singh

Die eingebaute Listener-Funktion, die mit React-Navigation geliefert wird, wäre die einfachste Lösung. Immer wenn eine Komponente durch Zurücknavigation wieder auf ein Objekt fokussiert wird, wird der Listener ausgelöst. Durch das Schreiben einer loadData-Funktion, die sowohl beim Laden der Komponente AND aufgerufen werden kann, als auch wenn der Listener benachrichtigt wird, können Sie die Daten beim Zurücksuchen problemlos erneut laden.

   componentWillMount(){
    this._subscribe = this.props.navigation.addListener('didFocus', () => {
     this.LoadData();
     //Put your Data loading function here instead of my this.LoadData()
    });}
2
RawBData

Keine dieser Antworten funktionierte für mich traurig, aber ich habe eine einfache Bibliothek gefunden, sie funktioniert genauso:

[npm install --save react-native-event-listeners][1]

componentDidMount() {
        this.listener = EventRegister.addEventListener('reloadData', (data) => {
            console.log("data is fetched");
            this.updateState(data); // private function that update the state using setState to trigger render
        });
    }

componentWillUnmount() {
    EventRegister.removeEventListener(this.listener)
}

Und in einer anderen Komponente, in meinem Fall eine Opazitätsschaltfläche:

<TouchableOpacity
            onPress={() => {
                fetch('url').then(data => {
                    ServiceLocator.saveData('matba', data);
                    EventRegister.emit('reloadData', data);
                    props.nav.goBack()
                })
                    .catch(error =>{
                        console.log(error);
                        Alert.alert("Cannot connect to the server");
                        props.nav.goBack()
                    });
            }}
        >

.... ......

0

Wenn Sie versuchen, neue Daten in eine vorherige Ansicht zu bekommen, und dies nicht funktioniert, möchten Sie möglicherweise die Art und Weise, wie Sie Daten in diese Ansicht übertragen, erneut betrachten. Das Aufrufen von goBack sollte sich nicht auf das Mounten einer vorherigen Komponente auswirken und den Konstruktor wahrscheinlich nicht erneut aufrufen, wie Sie bereits bemerkt haben.

Als ersten Schritt würde ich Sie fragen, ob Sie eine Component , PureComponent oder Functional Component verwenden. Basierend auf Ihrem Konstruktorkommentar klingt es so, als würden Sie eine Component-Klasse erweitern.

Wenn Sie eine Komponente verwenden, unterliegt die Rendermethode shouldComponentUpdate und der Wert Ihres Status liegt in Ihrer Kontrolle.

Ich würde die Verwendung von componentWillReceiveProps empfehlen, um zu überprüfen, dass die Komponente die neuen Daten empfängt, und sicherzustellen, dass der Status aktualisiert wurde, um die neuen Daten widerzuspiegeln.

Wenn Sie den Konstruktor zum Aufrufen einer API oder einer asynchronen Funktion verwenden, ziehen Sie in Betracht, diese Funktion in eine übergeordnete Komponente der Route, von der Sie goBack aufrufen, und der Komponente, die Sie mit den neuesten Daten aktualisieren möchten, zu verschieben . Anschließend können Sie Ihre übergeordnete Komponente auffordern, die API erneut abzufragen, oder ihren Status von einer untergeordneten Komponente aktualisieren.

Wenn die Route C den Status/die Daten der Anwendung aktualisiert, sollte diese Aktualisierung an ein gemeinsames übergeordnetes Element der Routen A, B und C weitergegeben und dann als Requisite weitergegeben werden.

Alternativ können Sie eine Statusverwaltungslösung wie Redux verwenden, um diesen Status unabhängig von übergeordneten/untergeordneten Komponenten zu verwalten. Sie würden Ihre Komponenten in eine connect-Komponente höherer Ordnung einschließen, um bei jeder Änderung des Anwendungsstatus die neuesten Updates abzurufen.

TL; DR Letztendlich klingt die Antwort auf Ihre Frage darin, wo der Status Ihrer Anwendung gespeichert ist. Es sollte so hoch in Ihrer Komponentenhierarchie gespeichert sein, dass jede Route immer die neuesten Daten als Requisite erhält, die von ihrem übergeordneten Element übergeben werden.

0
joel.bowen

Bei dieser Antwort wird davon ausgegangen, dass die Reaktiver-Navigationsbibliothek verwendet wird. Dies ist jedoch unwahrscheinlich, da sie keine goBack () -Methode enthält.

Der Konstruktor ruft kein zweites Mal auf, da Bildschirm A und B noch gerendert werden (aber hinter Bildschirm C verborgen sind). Wenn Sie wissen möchten, wann Bildschirm B wieder sichtbar wird, können Sie Navigationsereignisse anhören.

class ScreenB extends Component {
  constructor(props) {
    super(props);
    // Listen to all events for screen B
    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent);
  }

  onNavigatorEvent = event => {
    switch (event.id) {
      case 'willAppear':
        // refresh your state...
        break;
  };
}

Andere Ereignisse: willDisappear, didAppear, didDisappear

Eine alternative Lösung für Ihr Problem besteht darin, eine Statusverwaltungslösung wie Redux zu verwenden, um den Status bei jeder Aktualisierung an alle Bildschirme (und nicht nur an Bildschirmübergängen) weiterzuleiten. Siehe altes Beispiel rea-native-nav/redux .

0
Royce Townsend