ReactNativeでアプリ内のWebViewを表示する時に、ヘッダータイトルを動的に変更する方法

アプリ内でWebViewを表示する時、WebView内で画面遷移してもも動的にヘッダータイトルを変更したい

アプリを実装していく中で、ほぼ間違いなくStackNavigationを使って画面遷移の制御をすると思います。
アプリで表示するところは画面ごとにタイトルを決めれますが、webViewは一つタイトルを決めて、そこからwebView内で画面遷移しても同じタイトルが使われてしまいます。
webViewを使うときはタイトルを表示しないという選択肢もありますが、タイトルを動的に変更する方法を見つけたので共有します。

ライブラリをインストール

react-native-webview
cd ios && pod install

実装

WebViewのonNavigationStateChangeというメソッドを使ってWebViewのタイトルタグを取得します。

import React from 'react';
import {WebView} from 'react-native-webview';
import { SafeAreaView } from 'react-native';

export const WebViewTitle = () => {
    const onChangeState = (e) => {
        console.log(e);
      };
  return (
    <SafeAreaView style={{flex:1}}>
      <WebView
        source={{uri: 'https://reactnative.dev/'}}
        onNavigationStateChange={e => onChangeState(e)}
      />
    </SafeAreaView>
  );
};

するとWebView内で画面遷移するたびにonNavigationStateChangeが発火し、コンソールに情報が表示されます。

実際のlog↓
{"canGoBack": true, "canGoForward": false, "loading": false, "navigationType": "other", "target": 4383, "title": "React Native · Learn once, write anywhere", "url": "https://reactnative.dev/docs/getting-started"}

ここからタイトルタグを取得し、それをアプリ内で管理すればいいだけです。

ただ、画面のタイトルを制御するファイル（StackNavigation.js）とWebViewを表示するファイル（実際にwebViewを呼び出しているところ）は別々のディレクトリであり、階層的にwebViewの方が子要素になると思います。
ですのでpropsで渡すことは不可能なので、
１、Reduxを使って管理
２、useContextを使って管理
のどちらかを使う必要があります。

またwebViewのタイトルタグが英語だったり、違う表現をしている可能性もありますので、webViewを作るエンジニアと相談する必要があります。