在 Expo 中使用 Jetpack Compose 构建 Android 原生 UI

解决 Android 端原生 UI 性能或功能限制问题：通过给 AI 设定 Expo SDK 55 的开发规范，使其能够正确编写基于 Jetpack Compose 的原生 UI 组件及其修饰符。

为什么需要这个技能

在开发 Expo 应用时，虽然 React Native 提供了强大的跨平台能力，但在某些 Android 特有场景下，使用原生的 Jetpack Compose 能提供更极致的性能和更丰富的 Material Design 3 交互体验。

@expo/ui/jetpack-compose 将 Compose 的 API 镜像到了 JavaScript 层。通过此技能，AI 可以帮你快速将 Jetpack Compose 的设计模式转化为 Expo 代码，无需手动查阅复杂的映射表，大大降低了 Android 原生 UI 的开发门槛。

适用场景

• 需要在 Expo 应用中构建高质量的 Android 原生界面。
• 需要使用 Compose 视图或修饰符（Modifiers）来实现复杂布局。
• 针对 Expo SDK 55 版本进行 Android 端 UI 性能优化。
• 将 Material Design 3 标准组件集成到 Expo 项目中。

核心工作流

1. 安装与环境准备： 执行安装命令并进行原生构建：

   npx expo install @expo/ui
   npx expo run:android

2. 组件与修饰符导入：

   • UI 组件从 @expo/ui/jetpack-compose 导入。
   • 修饰符从 @expo/ui/jetpack-compose/modifiers 导入。

3. 构建 UI 树（必须使用 Host）： 所有 Compose 组件必须包裹在 <Host> 中。

   • 自动适应内容大小：使用 <Host matchContents>。
   • 指定明确尺寸（如 LazyColumn 父容器）：使用 <Host style={{ flex: 1 }}>。

4. 关键组件选择：

   • 列表渲染：使用 LazyColumn 代替 ScrollView 或 FlatList。
   • 图标使用：通过 <Icon> 组件加载 Android XML 矢量图（如 Material Symbols）。

代码示例：

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>;

下载和安装

下载 expo-ui-jetpack-compose 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐