expo-ui-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>；需要显式指定尺寸时（例如作为 LazyColumn 的父级），使用 <Host style={{ flex: 1 }}>。示例：

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 — 平台特定设计要求使用 Compose 原生列表时使用；不要一概用它替代 React Native 列表。将其包裹在 <Host style={{ flex: 1 }}> 中。
• Icon — 使用 Android XML 矢量可绘制资源搭配 <Icon source={require('./icon.xml')} size={24} />，这些资源可从 Material Symbols 获取。

限制

• API 以 SDK 55 为目标；编辑前请核对该版本的实际 Expo 文档和已安装的软件包。Android/iOS 示例仅适用于各自平台，不能互换，也不能证明真实设备上的行为。现有框架和用户要求优先。
• 原生重建会安装或执行依赖项并更改项目；请先确认预期的开发目标。icon.xml 和应用代码是应用资源，不是捆绑文件。
• 不要将输出视为针对特定环境进行验证、测试或专家审查的替代品。
• 如果缺少必需的输入、权限、安全边界或成功标准，请停止并请求澄清。