Agent Skills
› sediman-agent/OpenSkynet
› Expo UI Jetpack Compose
Expo UI Jetpack Compose
GitHub适用于Expo SDK 55的Jetpack Compose集成技能，提供UI组件和修饰符的使用指南。指导开发者通过导入特定包、查阅类型定义及文档来构建原生Android界面，并强调使用Host包裹Compose树及LazyColumn等关键组件的最佳实践。
触发场景
需要在Expo项目中集成Jetpack Compose
询问@expo/ui/jetpack-compose的安装或配置
查找Expo支持的Compose组件API
安装
npx skills add sediman-agent/OpenSkynet --skill Expo UI Jetpack Compose -g -y
SKILL.md
Frontmatter
{
"name": "Expo UI Jetpack Compose",
"description": "`@expo\/ui\/jetpack-compose` package lets you use Jetpack Compose Views and modifiers in your app."
}
The instructions in this skill apply to SDK 55 only. For other SDK versions, refer to the Expo UI Jetpack Compose docs for that version for the most accurate information.
Installation
npx expo install @expo/ui
A native rebuild is required after installation (npx expo run:android).
Instructions
- Expo UI's API mirrors Jetpack Compose's API. Use Jetpack Compose and Material Design 3 knowledge to decide which components or modifiers to use. If you need deeper Jetpack Compose or Material 3 guidance (e.g. which component to pick, layout patterns, theming), spawn a subagent to research Jetpack Compose and Material Design 3 best practices.
- Components are imported from
@expo/ui/jetpack-compose, modifiers from@expo/ui/jetpack-compose/modifiers. - Always read the
.d.tstype files to confirm the exact API before using a component or modifier. Runnode -e "console.log(path.dirname(require.resolve('@expo/ui/jetpack-compose')))"to locate the package, then read the relevant{ComponentName}/index.d.tsfiles. This is the most reliable source of truth. - When about to use a component, fetch its docs to confirm the API - https://docs.expo.dev/versions/v55.0.0/sdk/ui/jetpack-compose/{component-name}/index.md
- When unsure about a modifier's API, refer to the docs - https://docs.expo.dev/versions/v55.0.0/sdk/ui/jetpack-compose/modifiers/index.md
- Every Jetpack Compose tree must be wrapped in
Host. Use<Host matchContents>for intrinsic sizing, or<Host style={{ flex: 1 }}>when you need explicit size (e.g. as a parent ofLazyColumn). Example:
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>;
Key Components
- LazyColumn — Use instead of react-native
ScrollView/FlatListfor scrollable lists. Wrap in<Host style={{ flex: 1 }}>. - Icon — Use
<Icon source={require('./icon.xml')} size={24} />with Android XML vector drawables. To get icons: go to Material Symbols, select an icon, choose the Android platform, and download the XML vector drawable. Save these as.xmlfiles in your project'sassets/directory (e.g.assets/icons/wifi.xml). Metro bundles.xmlassets automatically — no metro config changes needed.
版本历史
- c9d8953 当前 2026-07-05 19:54
