Android主屏幕快捷方式终极指南从自适应图标到固定到桌面expo-quick-actions完整实现【免费下载链接】expo-quick-actionsAdd home screen quick actions / shortcuts and custom icons to your Expo app项目地址: https://gitcode.com/gh_mirrors/ex/expo-quick-actionsexpo-quick-actions是一个面向 Expo 应用的 React Native 库让你只需几行 TypeScript就能为 App 添加 Android 主屏幕快捷方式Quick Actions / App Shortcuts、动态切换 App 图标并通过配置插件生成全套自适应快捷图标。长按照 App 图标弹出快捷菜单、把「Compose」一键固定到桌面这些原生物理入口都能用它轻松实现。一、它能为你的 App 做什么能力说明长按弹出快捷方式长按照 App 图标弹出最多 4 个快捷入口固定到桌面Android 快捷方式可被用户拖拽、固定成独立图标自适应快捷图标通过 Config Plugin 自动生成foreground 背景色的响应式图标动态 App 图标运行时切换 App 图标类似微信主题图标点击回传通过事件监听拿到用户点击的快捷项及params参数核心 API 在 src/index.ts 中导出setItems、addListener、initial、maxCount、isSupported动态图标 API 在 src/icon.ts 中Android 端原生实现位于android/src/main/java/expo/modules.quickactions/ExpoQuickActionsModule.kt。二、一键安装步骤git clone https://gitcode.com/gh_mirrors/ex/expo-quick-actions npx expo install expo-quick-actions⚠️ 注意版本对应关系混用会导致原生模块报错Expo SDKexpo-quick-actions56.x6.0.254.x6.0.053.x5.0.052.x3.0.0三、三步开启 Android 主屏幕快捷方式第 1 步注册快捷项在 App 启动时调用一次QuickActions.setItems每个动作只需id、title、icon三个字段参考示例example/App.tsxQuickActions.setItems([ { id: compose, title: Compose, icon: asset:shortcut_compose }, { id: demo, title: Demo, icon: shortcut_three }, ]);第 2 步重新构建原生工程npx expo prebuild -p android npx expo run:android第 3 步长按桌面图标验证长按 App 图标即可看到快捷菜单QuickActions.maxCount可读取当前设备允许的最大数量如 Pixel 6 为 15官方推荐仍用 4 个。3.1 监听用户点击initial 与 addListenerQuickActions.initialApp 由快捷方式唤起时的初始动作冷启动场景QuickActions.addListenerApp 已运行时点击快捷项的回调配合 Hookssrc/hooks.ts更优雅import { useQuickAction, useQuickActionCallback } from expo-quick-actions/hooks;若使用 Expo Router只需在子布局中调用 src/router.ts 里的useQuickActionRouting()配合params: { href: /compose }即可让快捷项直接深链到指定页面。四、用配置插件生成自适应快捷图标Android 快捷方式可以被用户固定到桌面因此它应当被视为 App 的“次级入口”——图标要像完整应用图标一样设计。Config Plugin 可以把任意图片编译成自适应快捷图标实现见plugin/src/withAndroidAppIcon.ts。在example/app.json的插件配置中声明即可[ expo-quick-actions, { androidIcons: { shortcut_compose: { foregroundImage: ./assets/adaptive-compose.png, backgroundColor: #EA3323 }, shortcut_one: { foregroundImage: ./assets/adaptive-icon.png, backgroundColor: #282A35 } } } ]设计要点前景图四周预留约 30% 的安全边距避免中心裁切时内容被切掉。下图就是示例项目里用于快捷方式的自适应素材配置生效后QuickActions.setItems里引用icon: shortcut_composeprebuild 后长按图标即可看到完整的响应式快捷图标——把它拖到桌面还能看到原生的“抖动”动画。五、运行时切换 App 图标固定到桌面的进阶玩法除了快捷方式expo-quick-actions/icon还支持运行时动态切换 App 图标让“桌面入口”本身随主题变化。图标通过插件expo-quick-actions/icon/plugin注入见plugin/src/withAppIcon.ts支持浅色/深色/着色三种变体示例配置在example/app.json[ expo-quick-actions/icon/plugin, [ { light: ./assets/scifi.png, dark: ./assets/space.png }, { light: ./assets/landscape.png, dark: ./assets/water.png } ] ]运行时只需三行import * as AppIcon from expo-quick-actions/icon; if (AppIcon.isSupported) await AppIcon.setIcon(0); // 传 null 恢复默认⚠️ 注意在 Android 上切换图标会关闭当前 App这是系统行为属于正常现象。六、最佳实践与常见问题只配 4 个动作Google 官方建议 4 个以内多而不精反而降低转化图标风格统一快捷图标固定到桌面后就是“副 App”请用完整的自适应设计而非小图标iOS 差异subtitle仅 iOS 生效iOS 图标可用symbol:heart.fillSF Symbols或asset:heart自定义模板图前缀图标变成小圆圈iOS说明icon字段解析失败检查素材名与 1x/2x/3x 规格是否齐全版本不匹配的排查对照本文开头的版本表用npx expo install expo-quick-actions --fix对齐版本再执行npx expo prebuild -c清理缓存后重建即可。 至此从长按弹出快捷菜单、自适应快捷图标、固定到桌面到动态 App 图标expo-quick-actions 已覆盖 Android 主屏幕入口的全部玩法。动手试试吧【免费下载链接】expo-quick-actionsAdd home screen quick actions / shortcuts and custom icons to your Expo app项目地址: https://gitcode.com/gh_mirrors/ex/expo-quick-actions创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Android主屏幕快捷方式终极指南：从自适应图标到固定到桌面，expo-quick-actions完整实现
Android主屏幕快捷方式终极指南从自适应图标到固定到桌面expo-quick-actions完整实现【免费下载链接】expo-quick-actionsAdd home screen quick actions / shortcuts and custom icons to your Expo app项目地址: https://gitcode.com/gh_mirrors/ex/expo-quick-actionsexpo-quick-actions是一个面向 Expo 应用的 React Native 库让你只需几行 TypeScript就能为 App 添加 Android 主屏幕快捷方式Quick Actions / App Shortcuts、动态切换 App 图标并通过配置插件生成全套自适应快捷图标。长按照 App 图标弹出快捷菜单、把「Compose」一键固定到桌面这些原生物理入口都能用它轻松实现。一、它能为你的 App 做什么能力说明长按弹出快捷方式长按照 App 图标弹出最多 4 个快捷入口固定到桌面Android 快捷方式可被用户拖拽、固定成独立图标自适应快捷图标通过 Config Plugin 自动生成foreground 背景色的响应式图标动态 App 图标运行时切换 App 图标类似微信主题图标点击回传通过事件监听拿到用户点击的快捷项及params参数核心 API 在 src/index.ts 中导出setItems、addListener、initial、maxCount、isSupported动态图标 API 在 src/icon.ts 中Android 端原生实现位于android/src/main/java/expo/modules.quickactions/ExpoQuickActionsModule.kt。二、一键安装步骤git clone https://gitcode.com/gh_mirrors/ex/expo-quick-actions npx expo install expo-quick-actions⚠️ 注意版本对应关系混用会导致原生模块报错Expo SDKexpo-quick-actions56.x6.0.254.x6.0.053.x5.0.052.x3.0.0三、三步开启 Android 主屏幕快捷方式第 1 步注册快捷项在 App 启动时调用一次QuickActions.setItems每个动作只需id、title、icon三个字段参考示例example/App.tsxQuickActions.setItems([ { id: compose, title: Compose, icon: asset:shortcut_compose }, { id: demo, title: Demo, icon: shortcut_three }, ]);第 2 步重新构建原生工程npx expo prebuild -p android npx expo run:android第 3 步长按桌面图标验证长按 App 图标即可看到快捷菜单QuickActions.maxCount可读取当前设备允许的最大数量如 Pixel 6 为 15官方推荐仍用 4 个。3.1 监听用户点击initial 与 addListenerQuickActions.initialApp 由快捷方式唤起时的初始动作冷启动场景QuickActions.addListenerApp 已运行时点击快捷项的回调配合 Hookssrc/hooks.ts更优雅import { useQuickAction, useQuickActionCallback } from expo-quick-actions/hooks;若使用 Expo Router只需在子布局中调用 src/router.ts 里的useQuickActionRouting()配合params: { href: /compose }即可让快捷项直接深链到指定页面。四、用配置插件生成自适应快捷图标Android 快捷方式可以被用户固定到桌面因此它应当被视为 App 的“次级入口”——图标要像完整应用图标一样设计。Config Plugin 可以把任意图片编译成自适应快捷图标实现见plugin/src/withAndroidAppIcon.ts。在example/app.json的插件配置中声明即可[ expo-quick-actions, { androidIcons: { shortcut_compose: { foregroundImage: ./assets/adaptive-compose.png, backgroundColor: #EA3323 }, shortcut_one: { foregroundImage: ./assets/adaptive-icon.png, backgroundColor: #282A35 } } } ]设计要点前景图四周预留约 30% 的安全边距避免中心裁切时内容被切掉。下图就是示例项目里用于快捷方式的自适应素材配置生效后QuickActions.setItems里引用icon: shortcut_composeprebuild 后长按图标即可看到完整的响应式快捷图标——把它拖到桌面还能看到原生的“抖动”动画。五、运行时切换 App 图标固定到桌面的进阶玩法除了快捷方式expo-quick-actions/icon还支持运行时动态切换 App 图标让“桌面入口”本身随主题变化。图标通过插件expo-quick-actions/icon/plugin注入见plugin/src/withAppIcon.ts支持浅色/深色/着色三种变体示例配置在example/app.json[ expo-quick-actions/icon/plugin, [ { light: ./assets/scifi.png, dark: ./assets/space.png }, { light: ./assets/landscape.png, dark: ./assets/water.png } ] ]运行时只需三行import * as AppIcon from expo-quick-actions/icon; if (AppIcon.isSupported) await AppIcon.setIcon(0); // 传 null 恢复默认⚠️ 注意在 Android 上切换图标会关闭当前 App这是系统行为属于正常现象。六、最佳实践与常见问题只配 4 个动作Google 官方建议 4 个以内多而不精反而降低转化图标风格统一快捷图标固定到桌面后就是“副 App”请用完整的自适应设计而非小图标iOS 差异subtitle仅 iOS 生效iOS 图标可用symbol:heart.fillSF Symbols或asset:heart自定义模板图前缀图标变成小圆圈iOS说明icon字段解析失败检查素材名与 1x/2x/3x 规格是否齐全版本不匹配的排查对照本文开头的版本表用npx expo install expo-quick-actions --fix对齐版本再执行npx expo prebuild -c清理缓存后重建即可。 至此从长按弹出快捷菜单、自适应快捷图标、固定到桌面到动态 App 图标expo-quick-actions 已覆盖 Android 主屏幕入口的全部玩法。动手试试吧【免费下载链接】expo-quick-actionsAdd home screen quick actions / shortcuts and custom icons to your Expo app项目地址: https://gitcode.com/gh_mirrors/ex/expo-quick-actions创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考