rit3zh/expo-glass-carousel

选用指南

AI 根据 README 整理 · 2026/11/3 09:06:20

使用方式

通过React组件方式使用，将GlassCarousel.Item放入GlassCarousel.Root中，支持自定义背景和覆盖层。

查看 README 依据

The component lives in [`src/components/glass-carousel`](src/components/glass-carousel). The demo invites screen is in [`src/components/ui/invites-screen`](src/components/ui/invites-screen). --- ## 🚀 Usage Put a `GlassCarousel.Item` inside `GlassCarousel.Root` for each card. The carousel snapshots each item's content into a Skia image, then draws the cards through the glass lens shader. ```tsx import { GlassCarousel } from "@/components/glass-carousel"; export function Gallery({ cards }: { cards: { id: string; title: string }[] }) { return (

<GlassCarousel.Root onIndexChange={(index) => console.log(index)}> {cards.map((card) => ( <GlassCarousel.Item key={card.id} label={card.title}> <Card {...card} /> </GlassCarousel.Item> ))} </GlassCarousel.Root> ); } ``` Children that aren't `GlassCarousel.Item` are drawn above the carousel as overlays. This is the place for headers, buttons or a status bar: ```tsx <GlassCarousel.Root background={<Backdrop />}> {items} <Header /> </GlassCarousel.Root> ```

部署要求

需要Expo SDK 58、React Native 0.88及配套依赖（Skia、Reanimated等）。

查看 README 依据

[Expo SDK 58](https://expo.dev/changelog) · [React Native 0.88](https://reactnative.dev/) · [React Native Skia](https://shopify.github.io/react-native-skia/) · [Reanimated 4](https://docs.swmansion.com/react-native-reanimated/) · [Worklets](https://docs.swmansion.com/react-native-worklets/) · [Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/) · [Expo Image](https://docs.expo.dev/versions/latest/sdk/image/) · [@expo/ui](https://docs.expo.dev/versions/latest/sdk/ui/) · [Expo Router](https://docs.expo.dev/router/introduction/) ---