This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

@expo/ui 中的通用组件是在平台原生 UI 工具包之上的单一 API 层。在 Android 上，它们委托给 @expo/ui/jetpack-compose。在 iOS 上，它们委托给 @expo/ui/swift-ui。在 Web 上，它们是使用 react-dom 或 react-native-web 的 JavaScript 实现，并且根据组件选择以适应控件。

🌐 The universal components in @expo/ui are a single-API layer over the platform-native UI toolkits. On Android, they delegate to @expo/ui/jetpack-compose. On iOS, they delegate to @expo/ui/swift-ui. On web, they're JS implementations using react-dom or react-native-web and are picked per component to suit the control.

安装

🌐 Installation

If you are installing this in an existing React Native app, make sure to install expo in your project.

用法

🌐 Usage

通用组件仍然必须封装在 Host 中，但你从包根导入所有内容，包括 Host。通用 Host 会在 Android 和 iOS 上调度到平台本地宿主，因此无需直接使用 @expo/ui/swift-ui 或 @expo/ui/jetpack-compose。

🌐 Universal components must still be wrapped in a Host, but you import everything, including Host, from the package root. The universal Host dispatches to the platform-native host on Android and iOS, so there's no need to reach for @expo/ui/swift-ui or @expo/ui/jetpack-compose directly.

import { Host, Column, Button, Text } from '@expo/ui';

export default function Example() {
  return (
    <Host style={{ flex: 1 }}>
      <Column spacing={12} alignment="center">
        <Text>Hello, world!</Text>
        <Button label="Press me" onPress={() => alert('Pressed')} />
      </Column>
    </Host>
  );
}

组件

🌐 Components

• 容器： Host — 每个通用子树所需的根。
• 布局: Column, Row, Spacer, ScrollView.
• 显示: Text, Icon.
• 控制: Button, Switch, Checkbox, Slider, TextInput, Picker.
• 披露和展示： BottomSheet，Collapsible。
• 集合和表单: List（带 ListItem），FieldGroup。

何时使用此而不是 swift-ui / jetpack-compose

🌐 When to use this versus swift-ui / jetpack-compose

• 当你希望拥有一个在 Android、iOS 和网页上无需修改即可运行的组件树时，请使用通用组件。在 Android 和 iOS 上，平台原生的外观和感觉得以保留，因为组件在底层会委托给 Jetpack Compose/SwiftUI。
• 当你需要平台特定的控件、修饰符或通用 API 未显示的行为时，请直接使用 @expo/ui/swift-ui 或 @expo/ui/jetpack-compose。