移动端开发指南

解决什么问题

移动端开发里，几类问题反复出现：用 ScrollView 配合 .map() 渲染动态长列表，数据量一大就掉帧；把状态一股脑塞进全局 store，组件本地状态与远端状态混在一起，排查 bug 时要在多个文件间来回跳转；忘记处理刘海、状态栏、Home 指示条等安全区域，内容被裁切；每次渲染都创建内联样式对象，既无法复用也妨碍性能优化；在 JS 线程里跑重计算，手势响应被阻塞；无视 iOS 与 Android 各自的交互惯例，比如 Android 返回键与 iOS 侧滑返回的语义差异。

技能如何工作

这份指南按「规范 + 反模式 + 检查清单」组织，核心能力集中在三个层面。

列表与组件结构：所有可滚动列表一律使用 FlatList 或 SectionList，并要求显式提供 keyExtractor；大列表场景下配置 windowSize 与 maxToRenderPerBatch 控制渲染批次与回收窗口。

• 导航：用 TypeScript 对路由参数做类型化，避免参数在页面间传递时丢失类型约束。
• 样式与平台差异：样式统一通过 StyleSheet.create 定义，平台差异用 Platform.select 收敛；布局同时适配手机、平板与桌面三种形态；安全区域交给 SafeAreaView 处理。
• 图片与计算：图片需要缓存，并提供加载与错误状态；重计算通过 InteractionManager 卸载出 JS 线程。
• Flutter 侧：补充 Widget 模式层面的约定，并与 React Native 部分形成对照。

最后是一份可执行的检查清单：列表用 FlatList、导航参数有类型、安全区域已处理、样式走 StyleSheet、布局三端适配、平台样式用 Platform.select、图片有缓存和状态兜底、重计算已离场。

适用边界

它面向 React Native 与 Flutter 两条技术栈，不覆盖原生 iOS/Android 开发，也不包含构建、CI/CD 或上架流程。Flutter 部分只停留在 Widget 模式层面，涉及平台通道、原生模块桥接等深入内容需要另行补充。