SuperAPI AI 工具集

expo-router-app-store-card-transition

前端与建站

查看项目

更新于 10-15 18:45

技能介绍

用途:在 Expo/React Native 应用中实现 App Store「Today」风格的卡片放大过渡:一张海报卡片点击后,平滑放大成为它自己的详情/文章页。三部分必须配套使用——海报卡片、缩放过渡、以及目标文章页。

主要能力:用 expo-router 的 Link.AppleZoom / Link.AppleZoomTarget 实现卡片到详情页的几何缩放过渡;卡片用 expo-image 展示图片与 blurhash 占位,并以图片自身色调填充说明文字块;详情页 hero 标记落点,使卡片图片飞入对应位置;配色由 blurhash 首分量(DC 项)解码出平均 sRGB 颜色,同时承担占位与调色两个用途。

使用方式(关键约束):必须使用 <Link asChild>,并包一层 <Pressable>;缩放经由 href 传递,router.push 不产生缩放,Link.AppleZoom 在缺少 asChild 时会抛错。Link.AppleZoom 只接受一个子元素,需把整张卡片包进单个 View;目标页用 <Link.AppleZoomTarget> 包住 hero 图。卡片不要加按压缩放包装(会与缩放争抢同一帧),普通 Pressable 加 selection 触感即可。示例:<Link href={{ pathname: '/discover/[slug]', params: { slug } }} asChild> 内嵌 <Pressable> 与 <Link.AppleZoom>。

适用场景:iOS 18+ 的照片类卡片到文章详情页的时尚/编辑式体验,卡片应做成目标页的缩小版(上图下文,文字用图片同色),便于过渡落地。

限制:需 expo-router 高于 v55、expo-image、iOS 18+;非 iOS 或旧版 iOS 上组件退化为普通 stack push,不崩溃但无缩放。首次出现的图片无法 blurhash(需要像素),需为已知 hero 提供构建期 hash(seed)。正文排版着色仅适用于 masthead,正文使用应用自身页面颜色,否则任意照片色上的长文难以阅读。