一个用于 Expo Router 的浮动液态玻璃标签栏,模仿 Revolut 风格,滚动时缩小并保持所有标签可见。

Stars

237

7 天增长

+95

Fork 数

8

开放 Issue

1

开源协议

MIT

最近更新

2026-07-22

AI 仓库情报摘要
FR-AI / ANALYSIS

为什么值得关注

它重新创造了原生不可用的滚动缩小标签栏行为,使用真实的 iOS 26 UIGlassEffect 和 UI 线程动画,实现流畅、原生感的交互。

适合谁使用

  • 构建 React Native 应用的 Expo 开发者
  • 需要毛玻璃效果和滚动行为的标签栏开发者
  • 追求 Revolut 风格 UI 的设计师
  • 需要高性能手势驱动导航的团队

典型使用场景

  • 滚动时自动缩小的底部标签导航(类似 Revolut)
  • 带有渐进式边缘模糊的顶部栏
  • 需要滑动跟踪和触觉反馈的自定义标签栏
  • 需要 UI 线程动画避免 JS 线程阻塞的应用

项目优势

  • 通过 iOS 26 UIGlassEffect 实现真实液态玻璃效果,硬件加速渲染
  • 所有动画在 UI 线程使用 Reanimated Worklet 运行,防止掉帧
  • 原生手势识别器确保即使有橡皮筋过滚也不会闪烁
  • 纯 TypeScript 实现,可在 Expo Go 中使用,无需自定义原生代码

使用前须知

  • 需要多个 peer 依赖(expo-blur、expo-glass-effect 等)
  • 真实玻璃效果仅限 iOS 26+;较旧 iOS 和 Android 使用纯色回退
  • 绑定到 Expo Router 的无头标签栏结构,并非通用标签栏解决方案

README 快速开始

Installation

项目描述

Floating liquid-glass tab bar for Expo Router — minimize-on-scroll, sliding highlight, finger scrubbing with haptics, progressive edge blur

相关仓库与替代方案

根据分类、Topic 和编程语言匹配的相似项目。

makecindy
精选
makecindy GitHub avatar

cindy

Cindy is an open-source AI agent that runs locally on your machine, integrates multiple AI harnesses and models, and provides memory, skills, and automation to perform real work in your projects and apps.

AI 与机器学习大语言模型
958
TanStack
精选
TanStack GitHub avatar

router

TanStack Router is a type-safe, data-driven React router with built-in caching, prefetching, and nested layouts, while TanStack Start extends it into a full-stack SSR framework.

Web 开发前端框架
14,861
vercel-labs
精选
vercel-labs GitHub avatar

scriptc

scriptc compiles ordinary TypeScript into small, fast native executables without needing Node.js, V8, or any JavaScript runtime in the binary.

开发者工具代码质量与构建
1,985