通用

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

Android

iOS

Web

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~56.0.26

@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

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun 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>你好，世界！</Text>
        <Button label="按我" onPress={() => alert('Pressed')} />
      </Column>
    </Host>
  );
}

可用组件

组件	描述
`BottomSheet`	从屏幕底部向上滑出的模态页面。
`Button`	具有多种视觉变体的可按压按钮。
`Checkbox`	表示选中或未选中状态的切换控件。
`Collapsible`	可点击的带标签标题，用于切换其内容的可见性。
`Column`	用于通用 @expo/ui 组件的垂直布局容器。
`FieldGroup`	包含分组设置样式行的可滚动容器。
`Host`	用于包装通用 @expo/ui 内容的跨平台 Host 组件。
`Icon`	平台原生图标——iOS 上为 SF Symbol，Android 上为 Material Symbol。
`List`	由多行组成的虚拟化垂直容器，与可点击的 ListItem 原语配合使用。
`Picker`	具有菜单和滚轮外观的单选输入控件。
`RNHostView`	用于在 @expo/ui 视图中承载 React Native 视图的跨平台组件。
`Row`	用于通用 @expo/ui 组件的水平布局容器。
`ScrollView`	支持垂直或水平滚动的可滚动容器。
`Slider`	用于从连续或分段范围中选择值的控件。
`Spacer`	用于在同级元素之间产生空白的布局间隔组件。
`Switch`	在开启和关闭状态之间切换的切换控件。
`Text`	用于显示样式化文本内容的组件。
`TextInput`	基于原生 SwiftUI 和 Jetpack Compose 组件、具有 React Native 兼容 API 的文本输入组件。

何时使用它而不是 `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`