SuperAPI AI 工具集

react-native-development

编程与开发

查看项目

更新于 10-15 20:31

技能介绍

用途:指导开发 Expo 与 React Native 移动应用,覆盖导航、状态、列表、动画、原生模块、iOS/Android 差异、无障碍与测试。

主要能力与要点: 基础:优先沿用项目工作流(Expo managed / prebuild / bare);使用严格 TypeScript 并标注导航参数类型;按功能组织 screens、components、hooks、api;不要照搬 Web 模式(div、自由 CSS、window 滚动);i18n 参考 i18n-mobile。 导航:Expo SDK 56/57+ 使用 react-native-expo-navigation(Expo Router,不在应用内直接使用 @react-navigation/*);标注路由与参数;处理 headers、deep links 与登录态(登录/未登录分离 stack);避免在渲染中导航,应在副作用或操作响应中执行。 UI 与布局:使用设计令牌与明暗主题(better-mobile-interface-react-native);地图、GPS 与白标出行可参考 google-maps-sdk、geolocation、taxi-machine 等;使用 SafeAreaProvider / insets;小屏慎用 Flexbox,测试 iPhone SE 与常见 Android;触控区域最小约 44pt 并有按下反馈;键盘用 KeyboardAvoidingView 或项目内库;深色模式走应用令牌。 列表与性能:FlatList/SectionList/FlashList 使用稳定 keyExtractor;固定高度时用 getItemLayout;避免 renderItem 中不必要的内联函数/重对象;图片注意缓存与尺寸;项目已用 Reanimated/Gesture Handler 时再用于动画并保持 worklets 正确。 状态与数据:服务端状态用 React Query 或项目既有模式;令牌用 SecureStore/Keychain 等安全存储,不用 AsyncStorage 存密钥;离线变更队列需明确设计。 原生与平台:UX 分歧时用 Platform.select 或 .ios.tsx/.android.tsx;权限需清晰说明与降级;原生模块要记录 app.json/plugins 配置与重新构建需求;遵守商店隐私与后台模式规范。 无障碍与 QA:使用 accessibilityLabel / role / state;支持 Dynamic Type / 字体缩放且布局不破;测试用 Jest + RNTL,关键流程可用 Maestro/Detox(若仓库已有)。 反模式:ScrollView 渲染 500 项地图;密钥存 AsyncStorage;未测试就假设 iOS/Android 完全一致;用重任务阻塞 JS 线程;使用仅 Web 的导入(localStorage、window)。 完成标准:屏幕有类型且可导航;主列表性能良好;认证/存储安全;iOS 与 Android 行为正常(或记录差异);所改功能具备基础无障碍。 限制:资料未提供具体版本兼容矩阵、安装命令、收费与平台支持细节,暂未提供。