Expensify/App 中 Android 端底部模态框选项被遮挡问题解析

问题背景

在 Expensify/App 项目的 Android 应用中，用户报告了一个界面显示问题：当进入工作区设置-分类-更多选项时，底部模态框中的"下载为 CSV"选项部分被遮挡。类似的问题也出现在标签和其他页面的底部模态框中。

技术分析

这个问题属于典型的移动端 UI 布局问题，特别是在 Android 平台上常见的底部控件遮挡现象。从技术角度来看，这通常由以下几个因素导致：

1. 模态框高度计算错误：模态框可能没有正确计算其内部内容的高度，导致部分内容被截断
2. 安全区域处理不当：没有正确处理 Android 设备的底部安全区域（如导航栏）
3. 滚动容器缺失：模态框内容区域可能缺少必要的滚动容器
4. 动态布局适应失败：在不同屏幕尺寸或密度下，布局没有正确适应

解决方案

开发团队通过分析发现，问题根源在于 ButtonWithDropdownMenu 组件中的特定样式设置。具体来说，组件中某个固定高度的设置导致了内容被截断。

修复方案包括：

1. 移除不必要的固定高度限制
2. 确保模态框内容区域可以动态扩展
3. 添加适当的滚动支持
4. 测试在不同屏幕尺寸和设备上的显示效果

问题验证

QA 团队在多个环境下进行了验证：

1. 生产环境（版本 9.1.56-1 和 9.1.58-4）无法复现问题
2. 测试环境（版本 9.1.59-0）可以稳定复现
3. 修复后版本在所有测试设备上显示正常

经验总结

这个案例提醒开发者：

1. 在实现底部模态框时，必须考虑各种屏幕尺寸和设备的显示差异
2. 避免使用固定高度，除非绝对必要
3. 全面测试在不同环境下的显示效果
4. 对于共享组件（如 ButtonWithDropdownMenu）的修改要格外谨慎，可能影响多个功能点

通过这次问题的修复，Expensify/App 项目改进了其 UI 组件的健壮性，为未来类似问题的预防积累了宝贵经验。