React Native如何无需导航跳转刷新未展示的前置页面

• 页面流转链路：Screen A → Screen B → Screen C
• 现有逻辑：Screen C 执行保存操作后，可正常返回Screen B并触发B页列表刷新，该部分运行正常
• 待解决问题：Screen A 展示的Screen B条目计数无法随C页保存操作同步更新，现有公开方案均要求跳转回Screen A传参，需要在不触发A页导航跳转的前提下完成A页数据更新

改造成本从低到高排序如下：

方案1：基于导航自带事件系统实现跨页通信（零额外依赖，优先选） #

目前React Native生态绝大多数项目使用React Navigation作为导航库，其自带的事件派发/监听能力天然支持跨栈内页面通信，不需要跳转页面就能触发目标页的更新逻辑，改造成本最低。
实现逻辑：

1. 在Screen A挂载时注册自定义刷新事件的监听，事件触发时重新拉取计数数据，页面卸载时移除监听避免内存泄漏
2. 在Screen C保存操作成功后，直接通过导航实例派发自定义刷新事件，不需要跳转至A页，原有返回B页、刷新B页的逻辑完全不需要改动

代码示例：

// Screen A 页面代码
import { useNavigation } from '@react-navigation/native';
import { useEffect, useState, useCallback } from 'react';
import { View, Text } from 'react-native';

const ScreenA = () => {
  const navigation = useNavigation();
  const [bListCount, setBListCount] = useState(0);

  // 原本拉取B页条目计数的逻辑
  const fetchBListCount = useCallback(async () => {
    const res = await api.getBEntryCount(); // 替换为你自己的接口请求
    setBListCount(res.data);
  }, []);

  useEffect(() => {
    // 页面首次加载拉取初始数据
    fetchBListCount();
    // 注册自定义刷新事件监听
    const removeListener = navigation.addListener('refreshBListCount', () => {
      fetchBListCount();
    });
    // 页面卸载时移除监听
    return removeListener;
  }, [navigation, fetchBListCount]);

  return (
    <View>
      <Text>B页面条目总数：{bListCount}</Text>
    </View>
  )
}

// Screen C 页面保存逻辑
const handleSave = async () => {
  // 原有保存逻辑
  await api.submitCForm(); // 替换为你自己的保存接口
  // 派发事件通知A页刷新数据，不需要做任何跳转操作
  navigation.emit('refreshBListCount');
  // 原有返回B页、刷新B页的逻辑保持不变即可
  navigation.goBack();
}

方案2：全局状态共享（适合多页面存在共享数据的项目） #

如果项目本身已经接入了全局状态管理工具（Zustand、Jotai、Redux、React Context均可），直接将B页条目计数存入全局状态即可：

• 所有会修改B页条目数的操作（包括C页保存、B页列表增删改），直接更新全局状态中的计数字段
• Screen A直接订阅全局状态中的计数值，状态变更时页面会自动重渲染，不需要额外写事件监听逻辑
  如果项目没有接入全局状态管理，也可以引入超轻量的事件总线库实现和方案1一致的发布订阅逻辑，效果完全相同。

补充兜底逻辑 #

可以给Screen A增加焦点监听，每次A页回到用户视野时拉取一次最新计数，覆盖其他可能导致数据不一致的场景，该逻辑不会影响现有流程——从C页返回B页时A页处于栈底，不会触发焦点事件，只有用户主动从B页返回A页时才会执行拉取：

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

// 在Screen A中添加即可
useFocusEffect(
  useCallback(() => {
    fetchBListCount();
  }, [fetchBListCount])
);

不推荐将A页的状态更新方法通过导航参数层层从A传递到B再传递到C的实现方式，页面耦合度极高，后续页面链路调整时维护成本极高。

内容的提问来源于stack exchange，提问作者helpinghand