ruflo 的 mobile-dev 智能体解读：React Native 跨平台移动开发 Agent 规范与实战指南

ruflo（Agent Meta-Harness）在其智能体生态中内置了一名专注移动端的专职开发者 mobile-dev，其行为规范沉淀在 spec-mobile-react-native.md。本文以这份规范文档为主体，结合仓库中该智能体的注册与分发方式，系统讲解一个 React Native 跨平台开发 Agent 应具备的职责边界、最佳实践、组件范式与平台适配要点，帮助你理解如何在多智能体协作中引入移动端领域专家，也可直接作为你团队自建移动端 Agent 的范本。

一、智能体定位：mobile-dev 是什么

规范文档头部使用 YAML frontmatter 声明了智能体的元信息：

---
name: mobile-dev
description: Expert agent for React Native mobile application development across iOS and Android
---

其中 name: mobile-dev 是智能体在协作中被调度的唯一标识；description 是其在任务分发阶段被语义匹配的依据。该文件位于 .claude/agents/specialized/mobile/spec-mobile-react-native.md，说明它被归类在 specialized（领域专家）目录下，负责面向 iOS 与 Android 的跨平台移动应用开发。

从仓库的公开文档可以确认它并非孤立文件，而是已被纳入整体智能体目录体系：

• docs/USERGUIDE.md 将 mobile-dev 列为 8 个 Specialized Dev 智能体之一（同类还包括 backend-dev、ml-developer、cicd-engineer），定位为提供“领域专长（Domain expertise）”；
• CLAUDE.md 的 Specialized Development 分组中同样列出了 mobile-dev；
• v3/@claude-flow/codex/src/templates/index.ts 的模板索引中存在 agent-spec-mobile-react-native 这一条目，注释标明这些条目来自“从 Claude Code agents 转换而来的 Agent skills”，据此可以推断该规范还被派生为 Codex 侧的技能模板，供多运行时复用。

也就是说，这份规范不仅是给智能体的“岗位说明”，也是 ruflo 中领域专家型智能体从定义、注册到跨运行时分发的一个具体样例。

二、五项核心职责：移动端开发任务边界

规范将 mobile-dev 的核心职责划分为五点，构成了移动端开发的完整任务闭环：

1. 开发 React Native 组件与页面（Develop React Native components and screens）——负责 UI 层的搭建，覆盖从单一组件到完整业务页面；
2. 实现导航与状态管理（Implement navigation and state management）——负责应用内页面流转结构与全局/局部数据的一致性；
3. 处理平台差异化代码与样式（Handle platform-specific code and styling）——在共享代码库中隔离 iOS / Android 的行为与视觉差异；
4. 按需集成原生模块（Integrate native modules when needed）——当纯 JS 能力不足以支撑业务（如底层相机、蓝牙、传感器、性能敏感路径）时，桥接原生代码；
5. 优化性能与内存占用（Optimize performance and memory usage）——关注长列表渲染、图片资源、内存泄漏等移动端典型瓶颈。

这五项职责在团队协作中意味着：当一名 mobile-dev 被编排进多智能体工作流时，它的任务边界应收敛在“移动端代码交付”上，而把接口设计、后端逻辑、测试策略等交还给对应专家（如 backend-dev、tester），这正是领域专家型智能体的协作意义。

三、最佳实践：Agent 需要内化的工程纪律

规范给出了 mobile-dev 在处理任务时必须遵守的六条最佳实践，可作为代码评审时的硬性检查点：

最佳实践	工程含义	常见违背场景
使用函数组件与 Hooks（functional components with hooks）	以 hooks 管理状态与副作用，减少 class 组件样板	新页面仍复制 class 组件模板
正确使用导航（React Navigation）	以类型安全的 route 参数与明确的导航层级组织页面	多层 navigation.navigate 嵌套导致路由混乱
恰当处理平台差异	用 Platform API 等隔离差异，而非到处 if	样式与逻辑中散落硬编码平台判断
优化图片与资源	按需尺寸、缓存与格式压缩，避免大图直载	直接引用 2x 以上未压缩原图
在 iOS 与 Android 双端测试	提交前至少双平台冒烟	仅在某单一平台模拟器验证
采用规范的样式模式	以 StyleSheet.create 集中管理样式	内联样式泛滥、难以复用

这些纪律同时是“可验证的”：Agent 产出的代码是否遵循函数式组件与 Hooks、是否通过 Platform.select 收敛平台差异、是否使用 FlatList 渲染长列表，评审者都能据此给出确定性结论，而非凭感觉。

四、组件模式：规范中的参考实现

规范附带了一个可直接作为代码骨架的参考组件，它同时示范了 hooks 状态、useEffect 副作用、导航跳转与 StyleSheet 样式组织：

import React, { useState, useEffect } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Platform,
  TouchableOpacity
} from 'react-native';

const MyComponent = ({ navigation }) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Component logic
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Title</Text>
      <TouchableOpacity
        style={styles.button}
        onPress={() => navigation.navigate('NextScreen')}
      >
        <Text style={styles.buttonText}>Continue</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    ...Platform.select({
      ios: { fontFamily: 'System' },
      android: { fontFamily: 'Roboto' },
    }),
  },
  button: {
    backgroundColor: '#007AFF',
    padding: 12,
    borderRadius: 8,
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    textAlign: 'center',
  },
});

逐段拆解，这段代码承载了多个值得固化为团队规范的点：

• useState + useEffect：状态放在 useState，数据获取等副作用统一收敛到 useEffect，并依赖数组为空表示仅在挂载时执行一次。更严谨的写法应在副作用内考虑竞态取消（如卸载后不再 setState）。
• navigation.navigate('NextScreen')：页面跳转依赖从 props 解构出的 navigation，这是 React Navigation 的典型用法；大型项目中建议用 NativeStackScreenProps 之类做参数类型约束。
• Platform.select 展开到样式对象：iOS 使用 System 字体、Android 使用 Roboto，把平台差异收敛在样式声明处，这正是上节“恰当处理平台差异”的代码级落地。Platform.select 既可用于样式，也可用于逻辑分支与模块选择。
• StyleSheet.create：集中定义样式并避免重复创建对象；示例还示范了基础排版节奏：容器内边距 16、字号层级（标题 24 / 正文 16）、主操作按钮用高饱和主题色 #007AFF 配圆角 8。

五、平台差异化：iOS 与 Android 的适配要点

规范单列了双平台适配的关注面，它们是 mobile-dev 每次提交前都要过一遍的清单：

iOS 侧

• 安全区（Safe areas）：刘海屏与 Home Indicator 会遮挡内容，建议用 SafeAreaView 或 useSafeAreaInsets（react-native-safe-area-context）处理顶部与底部内边距，而非写死 paddingTop；
• 导航模式：遵循 iOS 的原生返回手势、大标题（large title）等交互习惯，避免自定义导航破坏系统一致性；
• 权限（permissions）：Info.plist 中必须配置对应权限用途描述字符串（如 NSCameraUsageDescription），否则系统会在访问相册、相机、定位等能力时直接拒绝。

Android 侧

• 返回键处理：Android 物理/手势返回需要显式接入——用 BackHandler 监听返回事件，正确处理“返回是否应退出应用 / 收起弹层 / 回到上一步”等分支，避免默认行为导致页面栈异常；
• Material Design：交互与视觉应贴近 Material 规范（如按钮高度、波纹反馈、elevation 阴影语义），与 iOS 的视觉语言形成平台区隔。

通用原则

平台差异代码应“少量且集中”。优先在样式层用 Platform.select、在极少数逻辑场景用 Platform.OS === 'ios'，而不是把平台分支散落在业务代码各处，保证后续维护与测试的路径可控。

六、性能与状态：长列表、图片资源与复杂应用状态

规范将性能优化与状态管理作为两个并列的关注点，展开如下：

• 长列表用 FlatList：不要用 ScrollView + map 渲染大量条目。FlatList 提供窗口化渲染（只挂载可视区域附近的行）、keyExtractor、getItemLayout（固定行高时显著提升滚动性能）、removeClippedSubviews 等能力。这是移动端“卡顿”问题最常见也最直接的解法。
• 图片与资源优化：按屏幕实际显示尺寸压缩图片、优先使用 WebP/AVIF 等现代格式、善用 react-native-fast-image 或系统缓存，避免在 JS 线程解码大图造成掉帧；图标类资产建议走字体图标或矢量方案。
• 内存占用：关注订阅/监听器的清理（useEffect 返回 cleanup）、导航栈中页面销毁后的事件解绑，以及大列表与图片缓存的峰值占用。
• 复杂应用的状态管理：中小型应用用 Context API + useReducer 足够；状态交互复杂、跨页面共享频繁的大型应用再引入 Redux（配合 Redux Toolkit）等方案。规范原文也明确“Context API or Redux”作为两个合理档位，选择标准应取决于状态复杂度与团队维护成本，而不是默认全上重型方案。

七、在 ruflo 中调度与扩展该智能体

理解这份规范的使用场景，需要把它放回 ruflo 的智能体体系里。从 docs/USERGUIDE.md 与 CLAUDE.md 的“Specialized Development”分组看，mobile-dev 与 backend-dev、ml-developer、cicd-engineer、api-docs 等并列，这类专家型智能体的价值在于被“按需拉起”：

• 当任务被识别为“需要跨平台移动端代码”时，description 中的关键词（React Native、iOS、Android）即作为检索信号，让调度层选中 mobile-dev；
• 它可与核心开发智能体（如 coder、reviewer）或测试智能体（如 tester）协作，分别承担移动端实现与验证；
• 该规范的目录归属 specialized/mobile/ 与文件名 spec-mobile-react-native 保持一致命名约定，便于在大型 Agent 目录中按领域快速检索。

如果你的团队也想自建移动端专家 Agent，最直接的方式就是以这份文件为模板：先声明清晰的 name 与 description，再列出职责边界、最佳实践、参考代码与平台检查清单，内容越具体，智能体在编排与评审中的行为就越可预期。仓库中 .claude/agents/specialized 与 .claude/agents/templates 目录还提供了更多同构的领域/模板 Agent 定义可供对照参考。

八、交付前自查清单

综合规范全文，一个合格的 mobile-dev 交付应通过以下自检：

1. 所有新页面均采用函数组件 + Hooks，无 class 组件样板残留；
2. 导航层级清晰、路由跳转集中，未出现跨模块的深层嵌套传递；
3. 平台差异全部收敛于 Platform.select / 少量 Platform.OS 分支，样式遵循 StyleSheet.create；
4. 长列表使用 FlatList 且配置了 keyExtractor，图片按需尺寸并做了缓存；
5. iOS 与 Android 双端模拟器均完成关键路径冒烟，iOS 安全区、Android 返回键处理均经过验证；
6. 权限声明与原生模块桥接在双端配置完整，无平台独占遗漏；
7. 状态方案与状态复杂度匹配（Context API / Redux 档位合理），组件卸载时无残留订阅。

以上每条均可对应到源码或运行结果给出客观证据，这也是 Agent 产出的移动端代码能否被 reviewer 类智能体快速放行的关键。