This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 57).

通用

使用 @expo/ui 为 Android、iOS 和 web 构建跨平台共享 UI 的组件。

Android

iOS

Web

Included in Expo Go

GitHub

npm

更新日志

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

安装

Terminal

- npx expo install @expo/ui

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

用法

通用组件仍然必须包裹在一个 Host 中，但你可以从包的根入口导入所有内容，包括 Host。通用的 Host 会在 Android 和 iOS 上分发到平台原生的 host，因此无需直接使用 @expo/ui/swift-ui 或 @expo/ui/jetpack-compose。

UniversalExample.tsx

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="按我" onPress={() => alert('Pressed')} />
      </Column>
    </Host>
  );
}

可用组件

类别	组件
容器	`Host`，每个通用子树所需的根。
布局	`Column`、`Row`、`Spacer`、`ScrollView`
显示	`Text`、`Icon`
控件	`Button`、`Switch`、`Checkbox`、`Slider`、`TextInput`、`Picker`
披露和展示	`BottomSheet`、`Collapsible`
集合和表单	`List`（包含 `ListItem`）、`FieldGroup`

何时使用这个而不是 `jetpack-compose`/`swift-ui`

当你希望一个组件树无需修改即可在 Android、iOS 和 web 上运行时，请选择 universal 组件。由于这些组件在底层委托给 Jetpack Compose/SwiftUI，因此在 Android 和 iOS 上会保留平台原生的外观和体验。
当你需要 universal API 未提供的平台特定控件、修饰符或行为时，请直接选择 @expo/ui/jetpack-compose 或 @expo/ui/swift-ui。

通用

安装

用法

可用组件

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

何时使用这个而不是 `jetpack-compose`/`swift-ui`