通用

For the complete documentation index, see llms.txt. Use this file to discover all available pages.

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

安装

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。

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。

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

• 当你希望有一个可在 Android、iOS 和 web 上不加修改直接运行的组件树时，请使用通用组件。由于这些组件在底层委托给 Jetpack Compose/SwiftUI，Android 和 iOS 上仍然保留平台原生的外观和体验。
• 当你需要通用 API 未暴露的平台特定控件、修饰器或行为时，请直接使用**@expo/ui/swift-ui** 或 @expo/ui/jetpack-compose。