當用戶從 React Native 中的另一個頁面導航回頁面時，如何重新加載頁面？

Question

我有兩個頁面，主頁和搜索頁面。 場景是我從主頁導航到搜索頁面，在搜索頁面中我得到了一些搜索結果。 我正在使用如下導航將搜索結果傳回主頁：

this.props.navigation.navigate('Home', {
      searchResponse: data,
});

這會將我帶到主頁，但它沒有重新加載。 如何刷新主頁，以便我可以使用從搜索頁面收到的數據？

Answer 1

嘗試使用替換方法

this.props.navigation.replace('Home', { searchResponse: data, }); 

這將用新的 url 替換整個 url 堆棧

Answer 2

只需嘗試一次，因為 navigation.navigate 不會重新加載頁面，而是從堆棧中獲取頁面，所以嘗試使用 .push 顯式重新加載頁面：

this.props.navigation.push('Home', {
      searchResponse: data,
});

更新：

如果你不想使用推送，反應導航有這個新功能：

import { StackActions } from '@react-navigation/native';

this.props.navigation.dispatch(
  StackActions.replace('Home', {
    searchResponse: data,
  })
);

有關更多詳細信息，請查看此rn-docs

希望能幫助到你

Answer 3

您可以在屏幕中的 componentDidMount 內使用 add navigation.addListener 每次導航到屏幕讀取 ComponentDidMount 方法時，

{ componentDidMount() {

    const { navigation } = this.props;
    navigation.addListener('willFocus', () => {

       console.log("ComponentDidMount function")

    })
}

在這個例子中每次你導航到屏幕它控制台 ComponentDidMount 函數