Expensify/App 中每日津贴编辑页面返回按钮逻辑修复分析

问题背景

在 Expensify/App 项目中，用户在使用每日津贴(Per Diem)功能时发现了一个导航逻辑问题。具体表现为：当用户从费用创建流程进入每日津贴费率编辑页面后，点击返回按钮时，系统没有正确返回到费用创建菜单，而是直接跳转到了工作区设置页面。

技术分析

问题根源

经过代码审查发现，该问题的根本原因在于路由导航逻辑中缺少了backTo参数的处理。在IOURequestStepDestination.tsx文件中，当导航到WORKSPACE_PER_DIEM路由时，没有传递当前活动路由作为返回目标参数。

影响范围

该问题主要影响Android平台用户，因为Android设备通常有物理返回按钮，用户更依赖系统级的返回导航。虽然Web端也存在同样的问题，但由于Web界面设计差异，问题表现不如Android端明显。

解决方案

代码修改

修复方案主要涉及两处修改：

1. 在路由定义中添加backTo参数支持：

WORKSPACE_PER_DIEM: {
    route: 'settings/workspaces/:policyID/per-diem',
    getRoute: (policyID: string | undefined, backTo?: string) => {
        if (!policyID) {
            Log.warn('Invalid policyID is used to build the WORKSPACE_PER_DIEM route');
        }
        return getUrlWithBackToParam(`settings/workspaces/${policyID}/per-diem`, backTo);
    },
},

2. 在导航调用处传递当前活动路由：

onPress={() => {
    InteractionManager.runAfterInteractions(() => {
        Navigation.navigate(ROUTES.WORKSPACE_PER_DIEM.getRoute(policy.id, Navigation.getActiveRoute()));
    });
}}

实现原理

修改后的实现利用了Expensify/App现有的路由参数处理机制。getUrlWithBackToParam函数会将返回目标URL编码到路由参数中，而headerWithBackButton组件会根据这个参数决定返回行为。

技术思考

导航设计模式

这个问题反映了单页应用(SPA)中导航状态管理的重要性。良好的导航设计应该：

1. 明确区分前进导航和返回导航的语义
2. 保持导航栈的完整性
3. 提供清晰的返回路径，避免用户迷失

移动端特殊考虑

在移动端开发中，特别是对于有物理返回按钮的Android设备，开发者需要特别注意：

1. 系统返回按钮行为应该与界面内的返回按钮一致
2. 深层链接和返回路径需要特殊处理
3. 导航过渡动画应该与操作意图匹配

质量保证

为了确保类似问题不再发生，建议：

1. 添加回归测试用例，覆盖以下场景：

   • 从费用创建流程进入每日津贴编辑
   • 从其他入口进入每日津贴编辑
   • 各种返回操作(界面按钮、系统返回、手势返回等)

2. 在代码审查时特别关注跨页面导航的参数传递

3. 考虑引入导航状态自动化测试工具

总结

这个案例展示了移动应用中导航逻辑的重要性。通过修复这个看似简单的返回按钮问题，我们不仅解决了具体的用户体验问题，也为项目积累了宝贵的导航设计经验。在复杂的应用状态管理中，清晰的导航语义和一致的行为是保证用户体验的关键。