SuperAPI AI 工具集

arabic-rtl-mobile

前端与建站

查看项目

更新于 10-16 04:59

技能介绍

用途:面向阿拉伯语优先的移动端界面,在 iOS 原生(SwiftUI、UIKit)、Android 原生(Jetpack Compose、Views/XML)和 React Native 中实现或修复原生 RTL 体验。

核心规则:先判断根级是否已生效 RTL。若已生效,优先使用框架的逻辑方向语义:iOS 用 leading/trailing,Android 用 start/end,React Native 用 start、end、marginStart、paddingStart 及 I18nManager.isRTL。不要盲目叠加第二层局部 RTL 覆盖,也不要在有更好方案时硬编码 right/left。

视觉哨兵检查:修复行、图标或控件前,先放一个全宽阿拉伯语文本块。若其落在视觉右侧,说明 RTL 正常;若落在左侧,先修根方向,再处理行级问题。

文本块:标题、副标题、描述等应占满可用宽度,用框架逻辑方向锚定;仅在设计明确要求时居中。行组合:阿拉伯语行分两区,主文本在视觉右侧,次要控件或附件在视觉左侧,文本块占弹性宽度,两者之间保留可见空白,避免向中间塌缩。

局部控件方向:加减控件、数字步进器、分段控件、播放控件等应保持内部顺序,需分别检查控件位置与内部符号顺序;必要时对控件本身做局部 LTR 处理。导航与图标:返回箭头应指向右,展开箭头应位于主文本块对侧,方向性图标与手势动画需目视确认。React Native 中源图不会因 RTL 自动翻转,需用 I18nManager.isRTL 选择替代资源或做方向变换。

常见失败模式:文本仅用固有宽度而漂浮、硬编码 right/left、重复局部 RTL 覆盖、文本与附件挤在一起、方向图标未翻转、React Native 绝对定位忽略 RTL、Android Views 仍用 left/right 边距、控件内部加减顺序颠倒、只做代码对称镜像而非视觉结果。

视觉 QA:修改共享组件后仍需逐屏检查标题、副标题、卡片、行、指标、箭头、底部 CTA 间距,确认根级 RTL、局部覆盖冲突、哨兵位置、文本与附件间距、方向图标及控件内部方向。工作顺序:先识别技术栈,再判断根级 RTL,然后修文本块宽度与逻辑对齐、行组合、箭头图标与方向动画,最后逐屏做视觉 RTL 检查。限制:资料未提供具体安装命令、版本要求或性能数据。