mcpField
E
expo-ui-jetpack-compose

expo-ui-jetpack-compose

github.com/expo开发3.5k12.8k 次安装今天更新
代码仓库

关于 expo-ui-jetpack-compose

面向 Expo SDK 55 的 Jetpack Compose 开发 Skill，指导通过 `@expo/ui` 使用 Compose 组件和修饰符，并强调查阅类型定义与文档。

主要功能

  1. 01使用 `@expo/ui` 的 Compose API
  2. 02通过 `Host` 包裹 Compose 视图树
  3. 03查阅 `.d.ts` 类型定义与文档
  4. 04使用 `LazyColumn` 构建可滚动列表
  5. 05通过 XML 矢量绘制资源使用图标

适用场景

  1. 01在 Expo 应用中构建 Compose 界面
  2. 02核实组件或修饰符的准确 API
  3. 03实现可滚动列表并添加 Material 图标

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/expo/skills --skill expo-ui-jetpack-compose

安装后在 Claude Code 中输入/expo-ui-jetpack-compose确认已加载。

附带文件agents/openai.yaml

详细介绍

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

安装

npx expo install @expo/ui

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

说明

  • Expo UI 的 API 与 Jetpack Compose 的 API 相似。请运用 Jetpack Compose 和 Material Design 3 知识，决定使用哪些组件或修饰符。如果需要更深入的 Jetpack Compose 或 Material 3 指导（例如选择哪个组件、布局模式、主题设置），请启动子 Agent，研究 Jetpack Compose 和 Material Design 3 的最佳实践。
  • 组件从 @expo/ui/jetpack-compose 导入，修饰符从 @expo/ui/jetpack-compose/modifiers 导入。
  • **使用组件或修饰符前，务必阅读 .d.ts 类型文件，以确认确切的 API。**运行 node -e "console.log(path.dirname(require.resolve('@expo/ui/jetpack-compose')))" 来定位软件包，然后阅读相关的 {ComponentName}/index.d.ts 文件。这是最可靠的信息来源。
  • 准备使用组件时，请获取其文档以确认 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 — 用于可滚动列表，替代 react-native ScrollView/FlatList。请用 <Host style={{ flex: 1 }}> 包裹。
  • Icon — 使用 Android XML 矢量可绘制资源：<Icon source={require('./icon.xml')} size={24} />。获取图标的方法：前往 Material Symbols，选择一个图标，选择 Android 平台，然后下载 XML 矢量可绘制资源。将其保存为项目 assets/ 目录中的 .xml 文件（例如 assets/icons/wifi.xml）。Metro 会自动打包 .xml 资源，无需更改 Metro 配置。

评论

支持 Markdown