Tải lại màn hình trên goBack react native

Question

Giả sử có hai màn hình trong trình điều hướng ngăn xếp:

First_Screen -> Second_Screen

Làm cách nào chúng ta có thể làm mới / tải lại màn hình trước đó khi quay lại màn hình đó bằng cách gọi this.props.navigation.goBack ()?

Tôi đang sử dụng các phiên bản điều hướng phản ứng và phản ứng bên dưới:

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

Tôi đã thử những thứ bên dưới,

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

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

Nhưng không nhận được kết quả như mong đợi.

Answer 1

thử cái này nó sẽ hoạt động

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

Answer 2

Vì bạn đang sử dụng điều hướng phản ứng 5x, bạn cần cập nhật trình nghe để theo dõi

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

tài liệu: https://reactnavigation.org/docs/function-after-focusing-screen/

Answer 3

Hãy thử cái này, nó hoạt động tốt

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

      return unsubscribe;
    }, [navigation]);