[解決済み] React ナビゲーション goBack() と親の状態の更新

質問

ログインしている場合はユーザー名を表示し、ログインしていない場合は「アカウント作成」「サインイン」のオプションを表示するページを作成しました。以下のような画面です。

ユーザは、[サインイン]または[アカウント作成]ページに移動することができます。サインインまたは登録に成功すると、このページが表示され、ユーザー名が表示されます。以下のような画面です。

現在、私はユーザーデータを AsyncStorage に保存していますが、ユーザーがログインまたは登録に成功すると、ページからのリダイレクト時にこのフィールドを更新したいのです。

どのように私はこれを実現することができますか？

からパラメータを渡す方法はありますか？ navigate.goBack() からパラメータを渡し、親はそのパラメータを聞いて状態を更新することができるのでしょうか？

どのように解決するのですか？

このように、navigateを呼び出す際に、コールバック関数をパラメータとして渡すことができます。

  const DEMO_TOKEN = await AsyncStorage.getItem('id_token');
  if (DEMO_TOKEN === null) {
    this.props.navigation.navigate('Login', {
      onGoBack: () => this.refresh(),
    });
    return -3;
  } else {
    this.doSomething();
  }

そして、コールバック関数を定義します。

refresh() {
  this.doSomething();
}

そして、ログイン/登録のビューで、goBackの前に、次のようにします。

await AsyncStorage.setItem('id_token', myId);
this.props.navigation.state.params.onGoBack();
this.props.navigation.goBack();

React Navigation v5用のアップデートです。

await AsyncStorage.setItem('id_token', myId);
this.props.route.params.onGoBack();
this.props.navigation.goBack();