Muat Ulang Layar di goBack react native

Question

Mari kita asumsikan ada dua layar di navigator tumpukan:

Layar_pertama -> Layar_Kedua

Bagaimana kita bisa menyegarkan / memuat ulang layar sebelumnya ketika kembali ke layar itu dengan memanggil this.props.navigation.goBack ()?

Saya menggunakan versi react-native dan react-navigation di bawah ini:

"react-native": "0.63.2",
"@react-navigation/native": "^5.7.3",
"@react-navigation/stack": "^5.9.0",

Saya sudah mencoba di bawah ini,

componentDidMount() {
    this.props.fetchData();
    this.willFocusSubscription = this.props.navigation.addListener(
      'willFocus',
      () => {
        this.props.fetchData();
      }
    );
  }

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

Namun tidak mendapatkan hasil yang diharapkan.

Answer 1

coba ini akan berhasil

  componentDidMount() {
    this.onFocusCall = this.props.navigation.addListener('willFocus', () => {
      this.apiCall();
    });
  }
  componentWillUnmount() {
    this.onFocusCall.remove();
  }

Answer 2

Karena Anda menggunakan react-navigation 5x, Anda perlu memperbarui listener untuk mengikuti

componentDidMount() {
    this.props.fetchData();
    this.willFocusSubscription = this.props.navigation.addListener(
      'focus',
      () => {
        this.props.fetchData();
      }
    );
  }

dokumen: https://reactnavigation.org/docs/function-after-focusing-screen/

Answer 3

Coba yang ini, ini berfungsi dengan baik

  useEffect(() => {
      const unsubscribe = navigation.addListener("focus", async () => {
      const response = await apiCall();
    });

      return unsubscribe;
    }, [navigation]);