GitHub 热门项目：netflix-ui

GitHub 项目：netflix-ui 仓库地址：https://github.com/saulsharma/netflix-ui 星级：1687 | 作者：索尔沙玛 项目描述：Expo/React Native 中的 Netflix UI =================================================== 自述文件内容： # Netflix UI 与 Expo 的克隆 使用 React Native 和 Expo 构建的高保真 Netflix 移动 UI 克隆，具有高级动画和手势交互功能。  ## 主要特点 ### 档案管理 - ? 交错加载的动画配置文件选择屏幕 - ? 平滑的配置文件切换过渡 - ? 音效和触觉反馈 ### 导航和动画 - ? 带有滑动动画的自定义选项卡导航 - ? 基于手势的内容交互 - ? 屏幕之间共享元素的转换 - ? iOS 风格的模态演示 - ? 动态模糊效果和缩放 - ? 特色内容的倾斜动画 ### 内容屏幕 - ? 带有特色内容的动画主屏幕 - ? 具有 Netflix 风格布局的“新热门”部分 - ? 手机游戏展示 - ? 动态搜索，即时结果 - ⬇️下载管理 - ? 预告片视频播放器 - ?可扩展类别列表 - ? 自定义字体 ### 性能 - ⚡ 使用 Reanimated 优化动画 - ? 高效列表渲染 [wip] - ? 原生手势处理 - ? 智能过渡管理 ## 技术堆栈 - [Expo](https://expo.dev) - React Native 开发平台 - [Expo Router](https://docs.expo.dev/router/introduction) - 基于文件的路由 - [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/) - 流畅的动画 - [React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/) - 本机手势 - [Expo Haptics](https://docs.expo.dev/versions/latest/sdk/haptics/) - 触觉反馈 - [Expo AV](https://docs.expo.dev/versions/latest/sdk/av/) - 音频/视频播放 ## 实施细节 ### 动画系统 - 自定义选项卡屏幕包装以实现一致的过渡 - 基于工作集的动画以实现最佳性能 - 内容预览的共享元素过渡 - 基于手势的模态交互 ### 状态管理 - 基于上下文的配置文件管理 - 动画状态协调 - 选项卡导航状态处理 ### 用户界面组件 - 可重复使用的动画组件 - 自定义 Netflix 风格的图标和布局 ## 项目结构 ```` 项目根/ ├── 应用程序/ │ ├──（选项卡）/ │ │ ├── (个人资料)/ # 个人资料部分 │ │ ├── index.tsx # 主屏幕 │ │ └── new.tsx # 新热屏 │ ├── 电影/ │ ├── _layout.tsx # 根布局 │ └── search.tsx # 搜索功能 ├── 组件/ │ ├── MovieList/ # 电影列表 │ ├── GameList/ # 游戏栏目 │ ├──FeaturedContent/ # 精选内容 │ ├── BottomSheet/ # 底页 │ ├── navigation/ # 导航组件 │ └── WhoIsWatching/ # 个人资料选择 ├── 挂钩/ │ ├── useCachedResources.ts │ ├── useColorScheme.ts │ ├── useDeviceMotion.ts │ └── useOverlayView.ts ├── 数据/ │ ├── movie.json # 电影数据 │ ├── new.json # 新内容数据 │ └── users.json # 用户资料 └── contexts/ # 应用范围内