使用react-native-router-flux时如何检测路由变化实现页面浏览埋点？

react-native-router-flux 提供了两种稳定的路由变化监听方式，都可以实现你的埋点需求：

方案1：绑定根Router组件的onStateChange回调（推荐） #

这是兼容性最好的方案，直接在根Router组件上绑定回调即可，所有路由栈变化都会触发该回调：

import { Router } from 'react-native-router-flux';
// 替换为你实际使用的分析SDK导入
import analytics from '@react-native-firebase/analytics';

// 存储上一个路由名，避免重复上报
let prevRouteName = null;

const App = () => {
  const handleRouterChange = (newState) => {
    // 取当前路由栈最顶层的活跃路由
    const currentRoute = newState.routes[newState.index];
    const currentRouteName = currentRoute.routeName;
    
    // 仅路由实际发生变化时触发上报
    if (currentRouteName && currentRouteName !== prevRouteName) {
      analytics().logScreenView({
        screen_name: currentRouteName,
        screen_class: currentRouteName,
      });
      prevRouteName = currentRouteName;
    }
  };

  return (
    <Router onStateChange={handleRouterChange}>
      {/* 保持你原有Scene配置不变 */}
    </Router>
  );
};

方案2：监听全局FOCUS事件 #

如果使用的是旧版本 react-native-router-flux，不支持onStateChange属性，可以选择监听全局的路由聚焦事件：

import { Actions, ActionConst } from 'react-native-router-flux';
import analytics from '@react-native-firebase/analytics';

let prevRouteName = null;

// App初始化时注册监听
const focusListener = (route) => {
  const currentRouteName = route.name;
  if (currentRouteName !== prevRouteName) {
    analytics().logScreenView({
      screen_name: currentRouteName,
      screen_class: currentRouteName,
    });
    prevRouteName = currentRouteName;
  }
};
Actions.addEventListener(ActionConst.FOCUS, focusListener);

// 记得在App销毁时移除监听，避免内存泄漏
// 例：组件卸载钩子中执行 Actions.removeEventListener(ActionConst.FOCUS, focusListener);

注意事项 #

• 上述两个方案中获取的路由名，对应你定义Scene时设置的key属性值，所以建议给Scene设置语义化的key，和上报需要的页面名保持一致，比如<Scene key="HomePage" component={Home} />上报的页面名就是HomePage
• 增加上一个路由名的判断逻辑是为了避免重复上报，部分场景（比如侧滑返回、多次快速点击跳转）可能会多次触发回调，加去重逻辑可以保证数据准确性
• 如果不需要上报Tab切换的浏览事件，可以拿到路由名后增加一层过滤规则，排除Tab对应的路由名即可

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