SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场react-native

react-native

编程与开发

查看项目

更新于 10-16 10:37

技能介绍

用途

用于使用 JavaScript/TypeScript 构建原生 iOS 与 Android 应用的跨平台移动开发。当需要在 React Native 与 Expo 上开发 iOS/Android 应用、实现原生功能或优化移动端性能时可参考本技能。

框架选型

框架 适用场景
Expo（推荐） 大多数应用、开发更快、托管工作流
React Native CLI 需要自定义原生模块、棕地应用
Expo 搭配 Dev Client 兼顾两者：Expo 开发体验加原生模块

项目初始化

Expo（推荐）：

npx create-expo-app@latest my-app
cd my-app
npx expo start

React Native CLI：

npx @react-native-community/cli init MyApp
cd MyApp
npx react-native run-ios  # or run-android

主要能力

  • 核心组件：View、Text、Image、TextInput、TouchableOpacity、Pressable、FlatList、ActivityIndicator、Modal、Switch 等，配合 StyleSheet 组织样式。
  • 导航：React Navigation 的 native-stack 堆栈导航与 bottom-tabs 标签导航，包含类型化参数与导航方法（navigate、goBack）。
  • 状态管理：Zustand（含 persist 与 AsyncStorage 持久化）与 React Query 的数据查询与刷新。
  • 样式方案：StyleSheet 与 NativeWind（React Native 的 Tailwind）类名写法。
  • 原生功能：expo-camera 相机拍照、expo-notifications 推送通知、expo-location 定位，均包含权限请求示例。
  • 性能优化：FlatList 的 initialNumToRender、maxToRenderPerBatch、windowSize、removeClippedSubviews、getItemLayout 与 memo/useCallback 记忆化；expo-image 的占位图、过渡与缓存策略。
  • 测试：Jest 配合 React Native Testing Library 的渲染、事件触发与断言示例。
  • 发布：EAS CLI 配置、构建与提交（iOS/Android），以及 app.json 中的名称、slug、版本、bundleIdentifier、package 等配置。
  • 新架构（React Native 0.76+）：Fabric（替代 Paper，同步渲染与并发特性）、TurboModules（替代原生模块，懒加载、同步访问、类型安全）、JSI（替代 Bridge，直接 JS 与原生通信，无 JSON）、Bridgeless Mode（完全移除桥接，降低内存）。启用方式见 app.json 的 newArchEnabled 与 iOS Podfile 的 RCT_NEW_ARCH_ENABLED。TurboModule 可通过 Spec 接口定义同步与异步方法，使用 TurboModuleRegistry.getEnforcing 获取。Fabric 支持 React 18/19 的并发渲染特性，包括数据获取 Suspense、transitions 与自动批处理。
  • Expo Router（文件路由）：通过模板创建，目录结构中 _layout.tsx 为布局、index.tsx 为首页、(tabs) 为标签组、[id].tsx 为动态路由、modal.tsx 为模态、+not-found.tsx 为 404；支持 Link 与 router 的 push、replace、back 导航。
  • React 19 兼容：使用新架构时支持 use() 读取 promise 与 context、ref 作为 prop（无需 forwardRef）、React Compiler 自动记忆化、useActionState 与 useOptimistic 表单处理。
  • EAS Update（OTA 更新）：配置后可推送无需应用商店审核的更新，支持按分支推送及通过 expo-updates 在应用内检查、下载与重载更新。
  • Hermes 引擎：React Native 默认 JS 引擎，通过字节码预编译加快启动、相比 JavaScriptCore 降低内存，并支持通过 Chrome DevTools Protocol 调试；Expo SDK 52+ 默认启用，可通过 jsEngine 配置。
  • Expo SDK 52+ 特性：Expo Router v4（含 API 路由）、expo-camera (next)（含条码扫描）、expo-video（取代 expo-av 的现代视频播放器）、expo-sqlite（通过 JSI 的同步 API）、DOM Components（在 React Native 内渲染 Web 组件）、React 19 支持、通过 app.json 配置的通用链接。

使用方式

按上述命令初始化项目后，按需引入核心组件与导航、状态管理、样式、原生功能及测试依赖；发布时使用 EAS CLI 构建与提交，并可按需配置 OTA 更新。

适用场景

需要使用 JavaScript/TypeScript 开发 iOS 与 Android 跨平台应用、集成原生功能（相机、通知、定位）或进行移动端性能优化的场景。

最佳实践

建议：优先使用 Expo 加快开发；实现完整的 TypeScript 类型；大量列表使用 FlashList；正确处理键盘；在真机测试。

不建议：在 render 中内联样式；列表跳过记忆化；忽略平台差异；用重计算阻塞 JS 线程；忘记处理深度链接。

限制

相关资料未说明收费、价格等商业条款信息。