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 的 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。

UniversalExample.tsx

Copy

import { useColorScheme } from 'react-native';
import { Host, Column, Button, Text } from '@expo/ui';

export default function Example() {
  const colorScheme = useColorScheme();

  return (
    <Host style={{ flex: 1 }}>
      <Column spacing={12} alignment="center">
        <Text textStyle={{ color: colorScheme === 'dark' ? '#FFFFFF' : '#000000' }}>
          Hello, world!
        </Text>
        <Button label="Press me" onPress={() => alert('Pressed')} />
      </Column>
    </Host>
  );
}

Android

iOS

组件

BottomSheet

Button

Checkbox

Collapsible

Column

FieldGroup

Host

Icon

List

Picker

RNHostView

Row

ScrollView

Slider

Spacer

Switch

Text

TextInput

何时使用这个与 swift-ui / jetpack-compose

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