SuperAPI AI 工具集

react-native-patterns

编程与开发

查看项目

更新于 10-15 15:22

技能介绍

React Native Patterns 是一份用于构建生产级 React Native 与 Expo 移动应用的实践指南,内容围绕项目搭建、导航、平台适配、样式、性能、库选型与开发建议展开。

用途 该技能面向使用 React Native 和 Expo 开发移动应用的场景,目标是帮助开发者按推荐模式搭建并优化应用,覆盖从项目初始化到性能调优的常见环节。

项目初始化 资料推荐大多数项目使用 Expo,命令为: npx create-expo-app@latest my-app cd my-app npx expo start 当需要完整的原生控制时,可使用裸 React Native: npx @react-native-community/cli init MyApp 资料给出的判断标准是:除非需要 Expo 不支持的自定义原生模块,否则优先使用 Expo。

导航 可使用 expo-router(基于文件的路由)或 @react-navigation/native。资料展示了 expo-router 的目录结构示例,包括根布局 _layout.tsx、首页 index.tsx、分组 (tabs) 下的标签导航与页面,以及动态路由 [id].tsx。

平台特定代码 小范围差异可用 Platform.select 处理,例如在 StyleSheet.create 中为 iOS 设置 shadow 相关属性、为 Android 设置 elevation。差异较大时,可使用平台特定文件,如 Component.ios.tsx 与 Component.android.tsx。

样式 推荐使用 StyleSheet.create 以获得性能优势(样式只发送到原生一次),示例包含 container 与 title 的样式定义。若希望获得类似 Tailwind 的体验,可使用 nativewind,示例中通过 className 设置布局与文字样式。

性能 长列表应使用 FlatList 而非 ScrollView,示例中配置了 keyExtractor、renderItem、initialNumToRender、maxToRenderPerBatch 与 windowSize。对开销较大的组件使用 React.memo 进行记忆化。资料明确列出应避免的做法:内联样式(每次渲染都会创建新对象)、renderItem 中的匿名函数、未加缓存的大图(指出 expo-image 可处理缓存)。

常用库 资料以表格形式给出按需求选用的库:导航用 expo-router 或 @react-navigation/native;状态用 zustand、jotai 或 React context;数据请求用 @tanstack/react-query;图片用 expo-image;图标用 @expo/vector-icons;存储方面敏感数据用 expo-secure-store,通用数据用 @react-native-async-storage/async-storage;动画用 react-native-reanimated;手势用 react-native-gesture-handler;表单用 react-hook-form + zod。

开发建议 资料给出的提示包括:从一开始就同时在 iOS 和 Android 上测试,而不是等到最后;在 Expo 中使用自定义原生模块时用 expo-dev-client;用 react-native-safe-area-context 处理安全区域;表单始终处理键盘避让(KeyboardAvoidingView);生产环境使用 expo-updates 进行 OTA 更新。

限制 资料未提供该技能的收费、价格、平台支持范围、效果数据或具体使用步骤之外的安装细节,这些信息暂未提供。