【ReactNative開発】React Navigation (6.x)で子コンポーネントから親コンポーネントのステートを更新する方法

こんばんは。ちょっと先週、今週と、リリースに向けた開発優先のため、更新が止まっていました。

落ち着いたわけではないですが、今日、ここしばらく毎回ぶち当たっていた壁を一つクリアにできてスッキリしたので、忘れないうちにまとめておこうと思い更新します。

それでは参ります。

Contents

前提

  • React Native (0.64.x)
  • React Navigation (6.x)
  • ステート管理にはReact Hooksを利用

実現したいこと

子コンポーネントから、親コンポーネントのステートを更新したい。超簡単にすると、以下のようなことをしたい。

const ComponentParent = () => {
   const [value, setValue] = useState("");

   return(
      ....
      navigation.navigate("ComponentChild")
   )
}

const ComponentChild = () => {
   return(
      ....
      <Button onPress=(()=>★親コンポーネントのステート(value)を更新する処理を書きたい</Button>
   )
}

実現方法

このStack Overflowが大変役に立ちました!!

https://stackoverflow.com/questions/44223727/react-navigation-goback-and-update-parent-state

親コンポーネントから、親コンポーネントのステートを更新する関数を渡せば良いということでした!スッキリした!!

const ComponentParent = () => {
   const [value, setValue] = useState("");
   const handleAction = (props) => {
        console.log("HANDLER CALLED!")
        setValue(props);
        console.log(value);
   }

   return(
      ....
      navigation.navigate("ComponentChild",{funcA: (param) => handleAction(param)})
   )
}

const ComponentChild = ({route}) => {
   return(
      ....
      <Button onPress=(()=>route.params.funcA("A")</Button>
   )
}

以上、React Navigationで子コンポーネントから親コンポーネントのステートを更新する方法でした!同じ課題に直面されている方のお役に立ちましたら幸いです、また下のいいねボタンポチっていただけると大変励みになります!

おしまい

この記事を気に入っていただけたらシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

ABOUT US
Yuu113
初めまして。ゆうたろうと申します。 兵庫県出身、東京でシステムエンジニアをしております。現在は主にデータ分析、機械学習を活用してビジネスモデリングに取り組んでいます。 日々学んだことや経験したことを整理していきたいと思い、ブログを始めました。旅行、カメラ、IT技術、江戸文化が大好きですので、これらについても記事にしていきたいと思っています。