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

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

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

それでは参ります。

前提

• 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で子コンポーネントから親コンポーネントのステートを更新する方法でした！同じ課題に直面されている方のお役に立ちましたら幸いです、また下のいいねボタンポチっていただけると大変励みになります！

おしまい