SuperAPI AI 工具集

expo-ui

前端与建站

查看项目

更新于 10-30 16:17

技能介绍

Expo UI(@expo/ui)用于在 Expo 或 React Native 应用中,用 React 构建真正的原生 UI:iOS 上渲染 SwiftUI,Android 上渲染 Jetpack Compose。

用途与整体思路

@expo/ui 的目标是让 React 组件直接映射到平台原生 UI,而不是模拟原生外观。它建议按以下顺序选择实现方式,并在第一个满足需求的层级停下:

  1. 通用组件(Universal components):从 @expo/ui 根导入。一套组件树无需修改即可在 iOS、Android 和 Web 上运行(Android 使用 Compose,iOS 使用 SwiftUI,Web 使用 react-native-web/react-dom),不需要拆分平台文件。这是推荐的起点。

  2. 平台专属层(SwiftUI / Jetpack Compose):从 @expo/ui/swift-ui 或 @expo/ui/jetpack-compose 导入。仅当通用层缺少所需组件或修饰符,或需要平台专属行为或优化时使用。代价是需要编写两套组件树,并拆分为 .ios.tsx / .android.tsx 文件(或通过 Platform.OS 分支),维护代码更多。

  3. 迁移替换(Drop-in replacements):如果已经在使用 React Native 社区 UI 库,@expo/ui 提供 API 兼容的替换,可从 @expo/ui/community/<name> 导入,例如 @gorhom/bottom-sheet、@react-native-community/datetimepicker 等。这是替换现有依赖的迁移旁路,不属于上述通用层与平台层选择的步骤。

主要能力

  • 通用组件层:一套组件树跨 iOS、Android、Web 运行,无需平台文件拆分。
  • 平台专属层:@expo/ui/swift-ui 提供 iOS 专属的 SwiftUI 组件、修饰符、RNHostView、useNativeState;@expo/ui/jetpack-compose 提供 Android 专属的 Jetpack Compose 组件、修饰符、LazyColumn 注意事项、图标、useNativeState。
  • 社区库替换:为部分流行的 React Native 社区 UI 库提供 API 兼容的替代实现。

使用方式

安装:

npx expo install @expo/ui

在 SDK 56 上,@expo/ui 可在 Expo Go 中运行,直接执行 npx expo start 即可,无需自定义构建。在更早的 SDK 上,需要先构建 dev client(npx expo run:ios / npx expo run:android)。

所有 @expo/ui 组件树——无论通用层还是平台专属层——都必须包裹在 Host 中。Host 必须始终从 @expo/ui(通用包根)导入,而不是从平台专属子包导入。

平台专属层的隔离要求:@expo/ui/swift-ui 仅限 iOS,@expo/ui/jetpack-compose 仅限 Android。在另一平台运行的文件中导入其中任何一个,都会在运行时崩溃并报 “Unable to get view config” 错误。应将平台专属组件树隔离在 components/ 目录下的 .ios.tsx / .android.tsx 文件中(不要放在 app/ 内,因为 Expo Router 不支持路由文件的平台扩展名),或在普通路由文件中用 Platform.OS 做保护。

版本说明

这些说明跟踪最新的 Expo SDK。通用层需要 SDK 56 及以上。迁移替换和平台专属层在 SDK 55 上也存在。特定 SDK 的组件细节,请参考对应版本的 Expo UI 文档。

参考资料

  • references/universal.md:通用 @expo/ui 组件及使用时机(SDK 56+)
  • references/drop-in-replacements.md:React Native 社区 UI 库的 API 兼容替换
  • references/swift-ui.md:平台专属 iOS UI:@expo/ui/swift-ui 组件、修饰符、RNHostView、useNativeState
  • references/jetpack-compose.md:平台专属 Android UI:@expo/ui/jetpack-compose 组件、修饰符、LazyColumn 注意事项、图标、useNativeState

限制与注意事项

  • 通用层需要 SDK 56+;更早 SDK 需先构建 dev client。
  • 平台专属子包不可跨平台导入,否则运行时崩溃。
  • 平台专属组件树需拆分文件或做平台判断,维护成本更高。
  • 关于具体收费、价格、平台支持范围或效果,资料中暂未提供。