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:

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
```
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

按以下顺序选择，找到第一个满足需求的层级即可：

通用组件——从这里开始。从
```
@expo/ui
```
根目录导入。一套组件树无需修改即可在iOS、Android和Web上运行（Android端用Compose，iOS端用SwiftUI，Web端用
```
react-native-web
```
/
```
react-dom
```
）。无需按平台拆分文件。→
```
./references/universal.md
```
平台特定组件（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

expo-ui

Original

Translation

Expo UI (
`@expo/ui`
)

Expo UI (
`@expo/ui`
)

Installation

安装

Choosing an approach (read this first)

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

References

参考资料

expo-ui

Original

Translation

Expo UI (@expo/ui)

Expo UI (@expo/ui)

Installation

安装

Choosing an approach (read this first)

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

References

参考资料

Expo UI (
`@expo/ui`
)

Expo UI (
`@expo/ui`
)