expo-quick-actions Hooks实战：useQuickAction与useQuickActionCallback如何选？一篇讲透

expo-quick-actions Hooks实战useQuickAction与useQuickActionCallback如何选一篇讲透【免费下载链接】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 应用添加主屏幕快捷操作Quick Actions和动态应用图标的开源库。本文聚焦它最常被问到的问题两个 Hook ——useQuickAction和useQuickActionCallback—— 到底有什么区别、怎么选。读完这篇你就能在项目中一次性用对它们。什么是 Quick Actions为什么需要 Hooks长按手机桌面图标iOS 长按、Android 长按会弹出应用自定义的快捷入口比如新建聊天搜索拍照。expo-quick-actions 用一套 API 帮你设置快捷项setItems定义快捷操作的标题、图标、参数监听启动事件用户点了哪个快捷项、带着什么参数启动应用通过 Hooks 拿到动态换图标expo-quick-actions/icon子模块可运行时切换应用图标。核心 API 定义在 src/index.ts它暴露了initial冷启动时命中的快捷项、maxCount最大快捷项数量、setItems、isSupported和addListener。两个 Hooks 就是对initial addListener这套组合的封装定义在 src/hooks.ts。两个 Hook 一图看懂核心差异对比项useQuickActionuseQuickActionCallback返回值当前快捷项对象Action \| null无只注册回调会触发组件重渲染吗✅ 会每次快捷项变化都 setState❌ 不会事件在回调里处理典型场景用快捷项数据更新界面导航跳转、埋点统计、全局状态冷启动时命中快捷项通过initial自动读入立即以initial调用一次回调一句话总结要改 UI 用useQuickAction只做事不改 UI 用useQuickActionCallback。useQuickActionCallback不重渲染的事件处理器看 src/hooks.ts 的注释写得很直白它防止组件因操作变化而整体重渲染。内部用useEffect订阅原生事件组件卸载时自动取消订阅并处理了冷启动的initial事件你无需重复处理。适合放在布局组件、全局容器、Provider里做导航、埋点这类全局行为import { useQuickActionCallback } from expo-quick-actions/hooks; function Layout() { useQuickActionCallback((action) { // 全局行为跳转或打点不影响任何界面渲染 console.log(快捷项被触发:, action); }); // ... }为什么不重渲染很重要如果把监听放进一个页面组件并让它重渲染每次用户从快捷项进入都会导致整棵组件树刷新。回调式监听把副作用隔离在事件处理里是更轻量的做法。useQuickAction让界面直接响应快捷项当快捷项的参数本身要驱动 UI比如根据params高亮某个 Tab、展示对应内容就用它。它会返回最近一次启动应用的快捷项没有则为nullimport { useQuickAction } from expo-quick-actions/hooks; function Home() { const action useQuickAction(); // action 变化时组件重渲染据此更新界面 return action ? Detail action{action} / : Welcome /; }官方示例 example/App.tsx 就是这么写的const action useQuickAction()然后把 action 的 JSON 直接渲染到页面上非常直观的演示。实战决策3 个信号快速选型遇到需求时按顺序问自己拿到快捷项后要不要改变界面要 →useQuickAction只是导航 / 埋点 / 发请求→useQuickActionCallback项目在用 Expo Router优先用 src/router.ts 提供的useQuickActionRouting它内部就是基于回调实现的只要快捷项带params.href就会自动router.navigate到对应路由还能传自定义 callback 拦截处理。// app/(root)/_layout.tsx import { useQuickActionRouting } from expo-quick-actions/router; export default function Layout() { useQuickActionRouting(); // 快捷项 params.href 直接变成路由跳转 return Slot /; }⚠️ 官方提醒useQuickActionRouting应放在子布局app/(root)/_layout.tsx而不是根布局因为它会触发导航。别忘了先设置快捷项再监听两个 Hook 只是接收端。发送端是setItems在应用启动时配置一次即可QuickActions.setItems([ { id: compose, title: 新建, icon: compose, params: { href: /compose } }, { id: search, title: 搜索, icon: search, params: { href: /search } }, ]);配合 Config Pluginplugin/src/index.ts还能在app.json里声明静态的 Android 自适应图标、iOS 图标与 iOS 静态快捷项示例项目 example/app.json 给了完整配置参考。常见问题FAQQ1冷启动时用户从快捷项进入回调会触发吗会。两个 Hook 都会检查QuickActions.initial冷启动命中的快捷项会被补发一次不会丢事件。Q2能同时使用两个 Hook 吗可以但没必要在同一个组件里混用。推荐分工全局布局里挂useQuickActionCallback做导航具体页面里用useQuickAction做界面响应。Q3Web 端会报错吗不会。src/index.web.ts 提供了空实现isSupported返回false事件监听为 no-op可安全跨端引用。总结改 UI →useQuickAction只做副作用 →useQuickActionCallback这是唯一的选型主线用 Expo Router 的项目直接用useQuickActionRouting一行代码打通快捷项 → 路由别忘了先setItems再谈监听。掌握这套组合你的 Expo 应用就能拥有原生的主屏幕快捷入口和动态图标体验。【免费下载链接】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），仅供参考