技能介绍

移动端开发要解决什么

React Native 和 Flutter 项目在迭代中容易积累一些「看起来能跑」的写法。它们在小列表、单一机型上并不显眼，一旦数据量变大或设备形态变多，问题就开始暴露。

滚动列表直接用 ScrollView 加 .map()，几千条数据时一次性渲染全部 cell，内存上涨、掉帧随之而来。
状态全部塞进全局 store，组件自身失去可读性，改一个列表要追好几个文件。
忘记处理刘海、状态栏、Home Indicator 等安全区域，界面在真机上被裁切。
每次 render 都新建内联样式对象，memo 判断随之失效，重渲染成本被放大。
重计算阻塞 JS 线程，动画和手势跟着卡顿。
只按一套交互约定实现，忽略了 iOS 侧返回滑动与 Android 返回键的差异。

这个技能做了什么

它把移动端常见的实现要求整理成一份可对照的清单，并在关键决策点上给出明确做法：

列表渲染：滚动列表一律走 FlatList（分组场景用 SectionList），并且始终提供 keyExtractor；数据量较大时通过 windowSize 与 maxToRenderPerBatch 控制渲染批次和内存占用。
导航：路由参数要求用 TypeScript 标注类型，避免跳转时出现隐式 any 导致的运行时错误。
布局：样式集中在 StyleSheet.create 中定义，而不是在 render 里写内联对象；布局需覆盖手机、平板与桌面宽度。
平台差异：使用 Platform.select 处理 iOS / Android 的样式分歧，同时尊重各平台既有的交互习惯。
资源与计算：图片需要带缓存以及 loading / error 状态；耗时计算移出 JS 线程，可用 InteractionManager 调度。

适用边界

这份清单停留在「写法与约定」层面，不会替你生成业务代码，也不含打包、上架、CI 等流程。它没有内置任何 UI 组件库的具体 API，实际项目仍需结合所用的组件库做取舍。安全区域的具体数值、图片缓存策略的实现细节同样需要按项目环境配置。此外，它不区分 React Native 的版本差异，旧版本中部分 API 的行为与新版并不一致，套用前应先确认项目版本。