Expo UI(@expo/ui)用于在 Expo 或 React Native 应用中,用 React 构建真正的原生 UI:iOS 上渲染 SwiftUI,Android 上渲染 Jetpack Compose。
用途与整体思路
@expo/ui 的目标是让 React 组件直接映射到平台原生 UI,而不是模拟原生外观。它建议按以下顺序选择实现方式,并在第一个满足需求的层级停下:
-
通用组件(Universal components):从 @expo/ui 根导入。一套组件树无需修改即可在 iOS、Android 和 Web 上运行(Android 使用 Compose,iOS 使用 SwiftUI,Web 使用 react-native-web/react-dom),不需要拆分平台文件。这是推荐的起点。
-
平台专属层(SwiftUI / Jetpack Compose):从 @expo/ui/swift-ui 或 @expo/ui/jetpack-compose 导入。仅当通用层缺少所需组件或修饰符,或需要平台专属行为或优化时使用。代价是需要编写两套组件树,并拆分为 .ios.tsx / .android.tsx 文件(或通过 Platform.OS 分支),维护代码更多。
-
迁移替换(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。
- 平台专属子包不可跨平台导入,否则运行时崩溃。
- 平台专属组件树需拆分文件或做平台判断,维护成本更高。
- 关于具体收费、价格、平台支持范围或效果,资料中暂未提供。