React Navigationを利用した際のstate値の初期化の方法

Question

前提・実現したいこと

React Nativeでアプリ開発をしています。

期待する動作

①：textInputでテキストを入力し、その内容をstateで保持
②：react navigationで画面を遷移し、その際①で保持したstateを遷移先に渡す
③：遷移先の画面で渡されたsatateを表示
④：react navigationで表示されるTopBarで遷移前の画面に戻る（添付画面参照）
⑤：textInput最初に入力されたテキストの値が表示されず初期化される

---

上記の動作になるように、試していますが、⑤のときにstateの値が初期化されず、遷移先で表示される値がそのまま表示されてしまいます。

解決の方法をご存知の方おりましたら、ご教授いただけないでしょうか？

対象のコード

遷移元のコード

import React from "react";
import { View, Text } from "react-native";
import { TextInput } from "react-native-gesture-handler";

class AreaSetScreen extends React.Component {
  state = {
    title: "初期値",
  };

  handleToTestHome(title) {
    this.props.navigation.navigate("TestHome", { title: title });
  }

  render() {
    return (
      <View>
        <Text>テスト入力</Text>
        <TextInput
          value={this.state.title}
          onChangeText={(text) => {
            this.setState({ title: text });
          }}
          onEndEditing={() => {
            this.handleToTestHome(this.state.title);
          }}
        />
      </View>
    );
  }
}

export default AreaSetScreen;

遷移先のコード

import React from "react";
import { Text, View } from "react-native";

class TestHome extends React.Component {
  state = {
    title: "",
  };

  componentDidMount() {
    const { params } = this.props.navigation.state;
    this.setState({ title: params.title });
  }

  render() {
    return (
      <View>
        <Text>{this.state.title}</Text>
      </View>
    );
  }
}

export default TestHome;

試したこと

下記の方法を試しましたが、うまくいきませんでした。
コンストラクタの利用

constructor(props) {
    super(props);
    this.state = {
      title: "初期値",
    };
  }

componentDidMountの利用

componentDidMount() {
    this.setState({
      title: "初期値",
    });

}

補足情報（FW/ツールのバージョンなど）

node : 12.18.3
react native : 4.10.1
expo : 3.22.3
React Navigation: 4.3.7

Answer 1

おそらくStackNavigatorを使用されていると思いますのでそれ前提で説明しますと
StackNavigatorは画面遷移しても前の画面がmountされたままになるので、backで戻ってもrerenderがかかりません。

代わりに、今見ている画面がその画面になった時（=forcusされたとき）にdidFocusイベントが走るので、それを使用します。

componentDidMount() {

    this.props.navigation.addListener(
      'didFocus',
      payload => {
        this.forceUpdate();
      }
    );

}

参考Doc: React Navigation公式

Comments

[tomaa]

ご回答いただきありがとうございます。
ご指摘のとおり、StackNavigatorを利用しています。

紹介していただいたコードで試したのですが、対象の画面に戻っても初期化されませんでした。
確認したいのですが、payloadの所は変更する必要がありますでしょうか？

[Hogeike]

すみません、didFocusでした。payloadは勝手に入ってくる値なので変更は不要のはずです。
また、versionによってはdidFocusがうまく動かないバグがあるそうなので、
react-navigation-stack は v2.3.8 以降で試してください。

公式ドキュメント
https://reactnavigation.org/docs/4.x/function-after-focusing-screen/#triggering-an-action-with-a-didfocus-event-listener
にdidFocusについて説明が載っています。

import React, { Component } from 'react';
import { View } from 'react-native';
import { withNavigation } from 'react-navigation';

class TabScreen extends Component {
componentDidMount() {
const { navigation } = this.props;
this.focusListener = navigation.addListener('didFocus', () => {
this.forceUpdate();
});
}

componentWillUnmount() {
this.focusListener.remove();
}

render() {
return <View />;
}
}

export default withNavigation(TabScreen);

[tomaa]

ありがとうございます。
ご指摘のとおり、didFoucusに変更すると初期化する事ができました。

componentDidMount() {
this.props.navigation.addListener("didFocus", (payload) => {
this.setState({ title: "初期値" });
this.forceUpdate();
});
}