ナビゲーターがポップバックしたときにコンポーネントを更新するにはどうすればいいですか？

Question

私のアプリはルーティングと画面遷移にNavigatorを使います。

最初の画面には項目のリストがあります。ユーザーが項目をタップすると、詳細画面が開き、ユーザーはその項目を編集できます。

ユーザが編集を終了して戻ったとき（ナビゲータのpop（）関数）、リストにはユーザが行った変更は反映されません。更新されたリストを表示するには、画面を再度ロードする必要があります。

ナビゲータのスタックにコンポーネントを強制的にアップデートする方法はありますか？

私はNavigatorの 'onWillFocus'小道具を使ってアプローチを試みましたが、私はconsole.logにルートを入れることができますが、経路によって表される画面への参照を取得して更新する。

これは正しく、我々はに移行しようとしているルートを記録します：

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

Answer 1

は、それはあなたに最も理にかなっているので、あなたが本当にonWillFocusイベントを利用したいと仮定すると...

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

を場合は、これを行う方法の1つです：

renderSceneメソッドを変更して、レンダリングされたシーンコンポーネントへの参照が維持されるようにします（comポネント）が搭載されている。そして、

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

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

あなたのコンポーネントにイベントを転送することができますonWillFocusハンドラで：

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

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

は、最後にあなたのコンポーネントcomponentWillFocusハンドラの中で、あなたが状態をリフレッシュする必要があるものは何でも行うことができますし、新しいレンダーをトリガーします。

は、他の使用例については、親子関係を持たない2つのコンポーネント間の通信のためにhttps://facebook.github.io/react/tips/communicate-between-components.html

を見てください、あなたはあなた自身のグローバルイベントシステムを設定することができます。イベントを受信すると、componentDidMount（）のイベントを登録し、componentWillUnmount（）を登録解除し、setState（）を呼び出します。フラックスパターンは、これを配置する可能性のある方法の1つです。