React Navigationで画面遷移時に再レンダリングする、しかも簡単に

ちょっと悩んだのでメモ。

まず、画面AとBがあってA→BにReact Navigationを使って遷移しているとする。 AにはとあるXという値が表示されていて、変更ボタンを押したらBに遷移してBでXをY変更したらAに戻ってくる、みたいな状況。 そして、Aに戻ってきたときに変更後の値であるYが表示されているってのがやりたかったこと。

ちなみに戻るにはReact NavigationのgoBack()を使おうとしていた。

実際にはこの値はstateなのでそのstateを更新してやればいいはず。今回はreduxを使ってるのでdispatchしてreducerあたりでstoreの値を更新しつつgoBack()するってのも可能かもしれない。 でもなんか面倒だなーと思って、もっと簡単にやる方法がないか調べた結果、こんな感じでできるようになりました。

ちなみにReactフックを使ってる感じです。

親、というか上記で言うところのAの画面に以下のような感じにすればいい。

  useEffect(() => {
    getData()

    const willFocusSubscription = navigation.addListener('focus', () => {
      getData()
    })

    return willFocusSubscription
  }, [])

Bのほうは普通に戻りたいところでnavigation.goBack()するだけ。自分の場合は『変更しました』的なダイアログを出しているのでOKボタンのonPressに書いておいた。

これなにをやっているかというとつまりfocusがあたったら値を取得しなおしてるってだけ。

ComponentDidMountとかでやれそうな気もしたけど、そもそもクラスコンポーネント使ってなかったのとReact Navigationの画面遷移ってのは遷移元のコンポーネントがunmountされているわけではなく、上に重なっているだけのような感じなので無理なんじゃないかと思うけど試してない。

というわけでひとまず解決した。