SuperAPI AI 工具集

react-native-best-practices

编程与开发

查看项目

更新于 10-15 21:11

技能介绍

用途:这份技能面向 React Native 与 Expo 项目,目标是构建“Write Once, Run Everywhere”、体验接近 100% 原生的移动应用,给出一套工程规范与检查清单,供开发时参照。

主要能力与用法:

  1. 架构与导航:采用 Expo Router 的文件式路由,使用 app/ 目录,风格类似 Next.js;在 app.json 中定义 scheme 以支持深度链接;用 _layout.tsx 承载共享的导航包装(Stack、Tabs)。
  2. UI 与样式:使用 NativeWind(React Native 上的 Tailwind)做样式;用 Shopify 的 FlashList 替代 FlatList,长列表可获得约 5 倍性能;屏幕内容始终包在 SafeAreaView 中,或使用考虑安全区 inset 的间距 token。
  3. 性能优化:用 expo-image 替代 React Native 的 <Image />,支持 Blurhash、缓存与预加载;用 react-native-reanimated 实现 60fps 动画(运行在 UI 线程,绕开 JS bridge);在 app.json 中确保启用 Hermes 引擎,以加快启动并减小包体积。
  4. 数据管理:异步服务端状态用 TanStack Query(React Query)作为标准方案,并优雅处理离线状态;本地存储用 react-native-mmkv 替代 AsyncStorage,为同步存储且约快 30 倍。
  5. 调试与开发体验:用 Expo Application Services(EAS)做云端构建;快速原型可用 Expo Go,若需加入原生模块则切换到 Development Build(Prebuild)。

检查清单:是否启用 Hermes;图片是否使用 expo-image;导航是否由 Expo Router 处理;重计算是否已移出 JS 线程。

限制:资料未提供具体版本号、安装命令、配置示例、收费与价格信息,也未给出适用平台范围的更多细节,暂未提供。