Wie man eine Komponente aktualisiert, wenn der Navigator dorthin zurückspringt?

Question

Meine App verwendet Navigator für Routing und Bildschirmübergänge.

Der erste Bildschirm enthält eine Liste von Elementen. Wenn der Benutzer auf ein Objekt tippt, öffnet sich ein Detailbildschirm, in dem der Benutzer es bearbeiten kann.

Wenn der Benutzer die Bearbeitung beendet hat und zurückgeht (pop() des Navigators), spiegelt die Liste nicht die vom Benutzer vorgenommenen Änderungen wider. Der Bildschirm muss erneut geladen werden, um die aktualisierte Liste anzuzeigen.

Gibt es eine Möglichkeit, eine Komponente im Stack des Navigators zu erzwingen?

Ich habe versucht, die 'onWillFocus' prop des Navigators zu verwenden, kann ich console.log die Route, aber nicht wissen, wie man einen Verweis auf den Bildschirm, der durch die Route darstellt und erzwingt es zu aktualisieren .

Dies meldet korrekt die Route, die wir im Begriff sind, den Übergang:

_onWillFocus(route) { 
     console.log('will transition to ' + route.name) 
}, 

...

<Navigator 
      ref={(ref) => this._navigator = ref} 
      style={{flex:1}} 
      configureScene={() => Navigator.SceneConfigs.FadeAndroid} 
      renderScene={this.renderScene} 
      onWillFocus={this._onWillFocus} 
/> 

Answer 1

Angenommen, Sie wirklich das onWillFocus Ereignis verwenden möchten, weil das am meisten Sinn macht in Ihrem Fall, hier ist ein Weg, es zu tun:

Ändern Sie Ihre renderScene Methode, so dass ein Verweis auf die gerenderten Szene Komponente gehalten wird (während der com nente montiert):

renderScene(route, nav) { 
    var Component = route.component; 

    return (
    <Component 
     ref={component => { route.scene = component; }} 
     navigator={nav} 
     {...route.passProps} 
    /> 
); 
} 

Dann in Ihrem onWillFocus Handler Sie das Ereignis Ihrer Komponente weiterleiten kann:

_onWillFocus(event) { 
    const { data: { route } } = event; 

    if (route.scene && route.scene.componentWillFocus) { 
    route.scene.componentWillFocus(event); 
    } 
} 

schließlich in Ihrer Komponente componentWillFocus Handler können Sie tun, was Sie den Zustand aktualisieren müssen und triggert ein neues Rendering.

Für andere Anwendungsfälle, haben bitte einen Blick auf https://facebook.github.io/react/tips/communicate-between-components.html

Für die Kommunikation zwischen zwei Komponenten, die keine Eltern-Kind-Beziehung haben, können Sie Ihr eigenes globales Ereignis-System. Abonnieren Sie Ereignisse in componentDidMount(), melden Sie sich in componentWillUnmount() ab und rufen Sie setState() auf, wenn Sie ein Ereignis erhalten. Flussmuster ist eine der Möglichkeiten, dies zu arrangieren.