web-dev-qa-db-ja.com

Reactネイティブ-React goBack（）のナビゲーション再レンダリングパネル

アプリで React Navigation を使用しています。前のパネルに戻ったときに、どのようにしてデータを更新できますか？

実用的な例は次のとおりです。私は現在パネルAにいます、パネルBここで、パネルAに表示されるデータベースのデータを更新します。 goBack（）をPanel Aに変更した後、データベースのデータを変更しますパネルAは、データベースからの新しいデータをレンダリングして保持します。

カスタムリフレッシュ関数をparamsとして子クラスに渡し、戻る前にそれを呼び出すことができることを読みましたが、まだマウントされていないコンポーネントを更新していて、エラーをスローするだけです。

react-nativerefreshreact-navigationrerender
6
GIV

これは私が達成した方法です！

パネルA

refreshFunction()
{
    //your refresh code should be here
}

 <TouchableOpacity onPress={()=>{
   this.props.navigation.navigate('PanelB', {refreshFunction: this.refreshFunction});
 }}>
    Redirect to Panel B
 </TouchableOpacity>

パネルB

const refreshFunction = this.props.navigation.state.params.refreshFunction;
if(typeof refreshFunction === 'function')
{
  refreshFunction();                
  //your back function
  this.goBack();
}
5
Jitender Badoni

多くの検索の後、結論：はい、次のことができます：

render(){
...
   <NavigationEvents
      onWillFocus={() => {
      //Call whatever logic or dispatch redux actions and update the screen!
      }}
   />
...
}

ソース： https://github.com/react-navigation/react-navigation/issues/1171

1
Duverney

Redux + firebaseを使用すると、firebase.on('value', snapshot => { dispatch(data) }からの監視可能なデータであるmappedToPropsが、保存時にreduxストアを更新するという問題がありました。そのデータをリストするコンポーネントがonBack()なので、リストで再レンダリングはトリガーされません。過去を現在の小道具と比較し、小道具が一致しなかった場合にのみfnでfirebase.onを再トリガーすることで解決しました。これは、リストコンポーネントに移動するときに常に起動するよりも優れていますが、firebase fnをまったく呼び出さずに強制的に再レン​​ダリングをトリガーするソリューションを好みます。

  componentDidUpdate(prevProps) {
    if (prevProps.data !== this.props.data) this.props.fetchdata();
  }
0
Avolition

React Navigationはリスナーを提供します これは、この正確なシナリオに使用できます。

たとえば、リスナーをPanel Aにアタッチします。これにより、フォーカスされたとき（つまり、パネルAは「ポップバック」されます）：

componentDidMount() {
  const { fetchDatabaseData, navigation } = this.props
  fetchDatabaseData()
  this.willFocusListener = navigation.addListener(
    'willFocus',
    () => {
      fetchDatabaseData()
    }
  )
}

componentWillUnmount() {
  this.willFocusListener.remove()
}
0
Bataleon