当用户从 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 函数