SuperAPI AI 工具集

rtl-and-direction

前端与建站

查看项目

更新于 10-18 18:02

技能介绍

用途

该技能用于让 Expo 应用在 iOS 和 Android 上正确支持从右到左(RTL)语言。它覆盖布局镜像、文本方向、数字显示和双向文本处理,并提供检查脚本验证代码是否符合规则。

主要能力

  • 逻辑样式与镜像:要求使用逻辑键(marginStart/End、paddingStart/End、start/end 等)而非物理的 left/right,用 flexDirection: 'row' 构建行,禁止 row-reverse 和 scaleX: -1。
  • 方向决定与重启:在应用启动前决定布局方向,语言切换时仅通过 restartForDirection() 执行一次带防护的重启,避免循环重启。
  • 文本方向:文本统一通过 AppText 渲染,使用 align="start" | "end" 对齐,由设计系统的文本样式钩子映射 textAlign 和 writingDirection。
  • 数字格式化:使用 localeTagFor(language, digits) 生成数字格式,显示语言对应的数字字符,存储保持普通数字。
  • 双向文本隔离:t() 和 isolate() 将插值的自由文本包裹在 FSI…PDI 中;整段 LTR 文本在 RTL 行中使用 <AppText direction="ltr">;用户自己的文本用 firstStrongDirection(text) 判断方向。
  • 物理表面与图标:地图、媒体进度条等物理表面放入 PhysicalDirectionView 保持从左到右;只有沿阅读方向指向的图标(back、forward、chevron、undo、redo)才会翻转,play、时钟、勾选等不翻转。
  • 检查脚本:运行 node ${CLAUDE_SKILL_DIR}/scripts/check-rtl.mjs . 检查规则,输出 PASS/FAIL,每条 FAIL 指明文件、规则和修复方式。

使用方式

工作流分为:检测(读取 languages.ts 判断是否已有 RTL 语言)、首次搭建方向层(复制 templates/src/ 和 templates/test/,重组根布局为 DirectionGate 包裹 AppRoot)、构建或修改屏幕时参考样式与镜像文档、处理数字与双向文本、语言选择屏幕先保存再按需重启、物理表面包裹并登记、编写测试、运行检查与类型检查、在 iOS 模拟器和 Android 模拟器上截图验证。完成后需报告改动内容、通过的检查、剩余的 SKIP 行及验证平台。

适用场景

适用于 React Native/Expo 项目新增阿拉伯语或希伯来语支持,或维护已有 RTL 实现的场景,尤其涉及界面镜像、图标方向、数字本地化和混合方向文本的开发工作。

限制

  • Android 重启行为尚未经过该技能的设备验证,报告中需如实说明。
  • Jest 没有布局引擎,无法验证镜像效果,必须依赖设备截图。
  • 部分流程依赖前置技能(i18n-strings-and-catalogs、design-system-structure、architecture-and-boundaries)创建的文件。
  • 具体安装命令、收费标准、价格等信息暂未提供。