Back to Details

expo-ui

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Expo UI (
@expo/ui
)

Expo UI (
@expo/ui
)

@expo/ui
renders real native UI from React: SwiftUI on iOS, Jetpack Compose on Android. Start with its universal components (one tree for iOS, Android, and web) and drop to platform-specific SwiftUI/Jetpack Compose only when the universal layer falls short. It also ships drop-in replacements for migrating off RN community UI libraries.
These instructions track the latest Expo SDK. The universal layer requires SDK 56+. Drop-in replacements and the platform-specific layers also exist on SDK 55. For component details on a specific SDK, refer to the Expo UI docs for that version.
@expo/ui
可通过React渲染真正的原生UI：iOS端为SwiftUI，Android端为Jetpack Compose。从通用组件开始（一套代码适配iOS、Android和Web），仅当通用层无法满足需求时，再使用平台特定的SwiftUI/Jetpack Compose。它还提供了可直接替换的组件，用于迁移脱离React Native社区UI库。
这些说明基于最新的Expo SDK。通用层需要 SDK 56+。可直接替换的组件和平台特定层在SDK 55中也已存在。如需特定SDK的组件详情，请参考对应版本的Expo UI文档。

Installation

安装

bash
npx expo install @expo/ui
On SDK 56, 
@expo/ui
works in Expo Go, so 
npx expo start
runs it directly — no custom build required. On older SDKs, build a dev client first (
npx expo run:ios
/ 
npx expo run:android
).
Every 
@expo/ui
tree — universal or platform-specific — must be wrapped in 
Host
.
bash
npx expo install @expo/ui
在SDK 56中，
@expo/ui
可在Expo Go中运行，因此直接执行
npx expo start
即可——无需自定义构建。在旧版SDK中，请先构建开发客户端（
npx expo run:ios
/ 
npx expo run:android
）。
所有
@expo/ui
树——无论是通用还是平台特定的——都必须包裹在
Host
中。

Choosing an approach (read this first)

选择合适的方案（请先阅读本节）

Work down this list and stop at the first layer that meets the need:
  1. Universal components — start here. Import from the 
    @expo/ui
    root. One component tree runs unmodified on iOS, Android, and web from a single source (Compose on Android, SwiftUI on iOS, 
    react-native-web
    /
    react-dom
    on web). No platform file splits. → 
    ./references/universal.md
  2. Platform-specific (SwiftUI / Jetpack Compose). Import from 
    @expo/ui/swift-ui
    or 
    @expo/ui/jetpack-compose
    . Use only when the universal layer is missing a component or modifier you need, or when you need platform-specific behavior or optimization. Downside: you write two trees and split them into 
    .ios.tsx
    / 
    .android.tsx
    files (or branch on 
    Platform.OS
    ) — more code to maintain. → 
    ./references/swift-ui.md
    and 
    ./references/jetpack-compose.md
Already using an RN community UI library? 
@expo/ui
also ships drop-in replacements — API-compatible swaps for popular libraries (
@gorhom/bottom-sheet
, 
@react-native-community/datetimepicker
, and more), imported from 
@expo/ui/community/<name>
. This is a migration side-path for replacing an existing dependency, not a step in the universal-vs-platform decision above. → 
./references/drop-in-replacements.md
按以下顺序选择，找到第一个满足需求的层级即可：
  1. 通用组件——从这里开始。从
    @expo/ui
    根目录导入。一套组件树无需修改即可在iOS、Android和Web上运行（Android端用Compose，iOS端用SwiftUI，Web端用
    react-native-web
    /
    react-dom
    ）。无需按平台拆分文件。→ 
    ./references/universal.md
  2. 平台特定组件（SwiftUI / Jetpack Compose）。从
    @expo/ui/swift-ui
    或
    @expo/ui/jetpack-compose
    导入。仅在通用层缺少所需组件或修饰符，或者需要平台特定行为或优化时使用。缺点：需要编写两套组件树，并拆分为
    .ios.tsx
    / 
    .android.tsx
    文件（或基于
    Platform.OS
    分支处理）——需要维护更多代码。→ 
    ./references/swift-ui.md
    和 
    ./references/jetpack-compose.md
已在使用React Native社区UI库？ 
@expo/ui
还提供了可直接替换的组件——与热门库（如
@gorhom/bottom-sheet
、
@react-native-community/datetimepicker
等）API兼容的替代组件，从
@expo/ui/community/<name>
导入。这是替换现有依赖的迁移路径，不属于上述通用vs平台特定方案的选择步骤。→ 
./references/drop-in-replacements.md

References

参考资料

Consult these resources as needed:
references/
  universal.md             Universal @expo/ui components and when to use them (SDK 56+)
  drop-in-replacements.md  API-compatible replacements for RN community UI libraries
  swift-ui.md              Platform-specific iOS UI: @expo/ui/swift-ui components, modifiers, RNHostView, useNativeState
  jetpack-compose.md       Platform-specific Android UI: @expo/ui/jetpack-compose components, modifiers, LazyColumn caveat, icons, useNativeState
按需查阅以下资源：
references/
  universal.md             通用@expo/ui组件及其适用场景（SDK 56+）
  drop-in-replacements.md  与React Native社区UI库API兼容的替代组件
  swift-ui.md              平台特定iOS UI：@expo/ui/swift-ui组件、修饰符、RNHostView、useNativeState
  jetpack-compose.md       平台特定Android UI：@expo/ui/jetpack-compose组件、修饰符、LazyColumn注意事项、图标、useNativeState