Expo UI Jetpack Compose

---

name: expo-ui-jetpack-compose description: expo-ui-jetpack-compose risk: unknown source: community

---

name: expo-ui-jetpack-compose description: @expo/ui/jetpack-compose 包允许你在应用中使用 Jetpack Compose 视图和修饰符。

本技能中的说明仅适用于 SDK 55。对于其他 SDK 版本，请参阅对应版本的 Expo UI Jetpack Compose 文档以获取最准确的信息。

何时使用

• 你需要在 Expo 中使用 @expo/ui/jetpack-compose 构建 Android 原生 UI。
• 任务涉及选择 Compose 视图或修饰符、将它们嵌入 Host 中，或将 Jetpack Compose 模式转换为 Expo UI 代码。
• 你正在针对 Expo SDK 55 的 Jetpack Compose 集成行为进行开发。

安装

npx expo install @expo/ui

安装后需要进行原生重建（npx expo run:android）。

使用说明

• Expo UI 的 API 镜像了 Jetpack Compose 的 API。使用 Jetpack Compose 和 Material Design 3 的知识来决定使用哪些组件或修饰符。
• 组件从 @expo/ui/jetpack-compose 导入，修饰符从 @expo/ui/jetpack-compose/modifiers 导入。
• 在使用组件之前，请获取其文档以确认 API - https://docs.expo.dev/versions/v55.0.0/sdk/ui/jetpack-compose/{component-name}/index.md
• 如果不确定修饰符的 API，请参阅文档 - https://docs.expo.dev/versions/v55.0.0/sdk/ui/jetpack-compose/modifiers/index.md
• 每个 Jetpack Compose 树必须包裹在 Host 中。使用 <Host matchContents> 进行内在尺寸调整，或使用 <Host style={{ flex: 1 }}> 当你需要显式尺寸时（例如作为 LazyColumn 的父级）。示例：

import { Host, Column, Button, Text } from "@expo/ui/jetpack-compose";
import { fillMaxWidth, paddingAll } from "@expo/ui/jetpack-compose/modifiers";

<Host matchContents>
  <Column verticalArrangement={{ spacedBy: 8 }} modifiers={[fillMaxWidth(), paddingAll(16)]}>
    <Text style={{ typography: "titleLarge" }}>Hello</Text>
    <Button onPress={() => alert("Pressed!")}>Press me</Button>
  </Column>
</Host>;

关键组件

• LazyColumn — 用于替代 react-native 的 ScrollView/FlatList 来实现可滚动列表。需包裹在 <Host style={{ flex: 1 }}> 中。
• Icon — 使用 <Icon source={require('./icon.xml')} size={24} /> 配合来自 Material Symbols 的 Android XML 矢量图。

限制

• 仅在任务明确匹配上述描述范围时使用此技能。
• 不要将输出视为环境特定验证、测试或专家审查的替代品。
• 如果缺少必要的输入、权限、安全边界或成功标准，请停下来寻求澄清。