react-native - 在标题 React Navigation v5 中按下按钮后，React Native（Expo）刷新前一个屏幕

Question

我处于这种困难的境地，需要一些帮助。

我正在开发这个显示本地事件或活动的应用程序。

GPS距离过滤屏幕：

MainTabNavigator 的屏幕包括 TopTabNavigator：

我有这个导航结构：

MainTabNavigator ->

• 选项卡 1：“事件”

  • 堆栈导航器
    • TopTabNavigator
      • 选项卡 1：“流行”
        • 平面列表
      • 选项卡 2：“本周”
        • 平面列表
      • 选项卡 3：“很快”
        • 平面列表
      • 选项卡 4：“在线活动”
        • 平面列表
    • Gps 距离过滤器屏幕

• 选项卡 2：“活动”

  • TopTabNavigator
    • 选项卡 1：“流行”
      • 平面列表
    • 选项卡 2：“全部”
      • 平面列表
        • 选项卡 3：等等...

MainTabNavigator 在 options 属性中提供了一个标题：

<Stack.Screen
    options={{
        headerTitle: '',
        headerLeft: () => MainTabNavigatorLeftHeader(navigation),
        headerRight: () => MainTabNavigatorHeaderRight(navigation),
        headerStyle: MainHeaderStyle
    }}
    name="Events"
    component={EventsScreen}
/>

在标题中有一个按钮，点击它会打开 GPS 距离过滤屏幕，可以在其中选择一个半径来查看某个 KM 半径内的内容。

然后，当您按下其标题中包含的 Gps 距离过滤器屏幕上的后退按钮时，您将返回到 maintabnavigator，其中包含顶部选项卡和其中的平面列表。因此，当 KM 半径已更改（我通过 AsyncStorage 保存选定的半径）时，我需要从所有顶部选项卡屏幕刷新所有平面列表。

我试图通过焦点添加侦听器或钩子来做到这一点，但是所有列表也会在顶部选项卡更改或顶部选项卡滑动时刷新，有没有办法有效地做到这一点？

Toptab画面都是由一个组件生成的，所以我只需要触发组件中的一个函数就可以刷新所有的画面。

标签： react-nativereact-navigation-v5