{"id":22025679,"url":"https://github.com/lukailun/react-native-animated-header-flat-list","last_synced_at":"2026-03-17T05:23:34.069Z","repository":{"id":263989580,"uuid":"891902731","full_name":"lukailun/react-native-animated-header-flat-list","owner":"lukailun","description":"A React Native FlatList component with an animated collapsible header, featuring parallax effects, smooth title transitions, sticky component support, and customizable styles. Built with TypeScript and separate background/content layers in header.","archived":false,"fork":false,"pushed_at":"2026-02-11T10:04:34.000Z","size":130636,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"develop","last_synced_at":"2026-02-11T18:04:37.703Z","etag":null,"topics":["android","animated","flat-list","ios","package","react-native","web"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-animated-header-flat-list","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lukailun.png","metadata":{"files":{"readme":"README-zh.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-11-21T06:51:16.000Z","updated_at":"2026-02-11T10:04:38.000Z","dependencies_parsed_at":"2025-04-08T09:38:22.084Z","dependency_job_id":"02a7b690-6c52-4f5c-b207-e5b54b95c876","html_url":"https://github.com/lukailun/react-native-animated-header-flat-list","commit_stats":null,"previous_names":["lukailun/react-native-animated-header-flat-list"],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/lukailun/react-native-animated-header-flat-list","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukailun%2Freact-native-animated-header-flat-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukailun%2Freact-native-animated-header-flat-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukailun%2Freact-native-animated-header-flat-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukailun%2Freact-native-animated-header-flat-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lukailun","download_url":"https://codeload.github.com/lukailun/react-native-animated-header-flat-list/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukailun%2Freact-native-animated-header-flat-list/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29359626,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-12T01:03:07.613Z","status":"online","status_checked_at":"2026-02-12T02:00:06.911Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","animated","flat-list","ios","package","react-native","web"],"created_at":"2024-11-30T07:18:58.541Z","updated_at":"2026-02-12T05:41:41.606Z","avatar_url":"https://github.com/lukailun.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-animated-header-flat-list\n\n[![NPM Version](https://img.shields.io/npm/v/react-native-animated-header-flat-list)](https://www.npmjs.com/package/react-native-animated-header-flat-list)\n[![NPM License](https://img.shields.io/npm/l/react-native-animated-header-flat-list)](https://www.npmjs.com/package/react-native-animated-header-flat-list)\n[![NPM Type Definitions](https://img.shields.io/npm/types/react-native-animated-header-flat-list)](https://www.npmjs.com/package/react-native-animated-header-flat-list)\n\n一个带有动画折叠头部的 React Native FlatList 组件，具有视差效果、平滑标题过渡、粘性组件支持和可自定义样式。使用 TypeScript 构建，并在 Header 中实现了背景层和内容层的分离。\n\n[English](./README.md) | 简体中文\n\n## 预览\n\n\u003cdiv align=\"center\"\u003e\n  \u003ctable style='width:100%;'\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ch4 align='center'\u003eiOS\u003c/h4\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ch4 align='center'\u003eAndroid\u003c/h4\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ch4 align='center'\u003eWeb\u003c/h4\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003cimg width=\"296\" height=\"640\" src=\"./assets/iOS.gif\" alt=\"iOS\"\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003cimg width=\"311\" height=\"640\" src=\"./assets/Android.gif\" alt=\"Android\"\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003cimg width=\"296\" height=\"640\" src=\"./assets/Web.gif\" alt=\"Web\"\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/div\u003e\n\n## 特性\n\n- 带有视差效果的动画折叠头部\n- 标题从 Header 到 NavigationBar 的平滑过渡\n- 可选的粘性组件支持\n- 完全可自定义的头部和标题样式\n- Header 中背景层和内容层的分离\n- TypeScript 支持\n\n## 安装\n\n```sh\nnpm install react-native-animated-header-flat-list\n```\n\n## 必需的依赖\n\n本库需要安装以下依赖项：\n\n```sh\nnpm install @react-navigation/native @react-navigation/native-stack @react-navigation/elements react-native-reanimated react-native-safe-area-context\n```\n\n请确保按照每个依赖的安装说明进行操作：\n\n- [React Navigation](https://reactnavigation.org/docs/getting-started)\n- [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started)\n- [React Native Safe Area Context](https://github.com/th3rdwave/react-native-safe-area-context#getting-started)\n\n## 使用示例\n\n```tsx\nimport { useCallback } from 'react';\nimport { Image, ImageBackground, StyleSheet, Text, View } from 'react-native';\nimport { AnimatedHeaderFlatList } from 'react-native-animated-header-flat-list';\n\nexport default function HomeScreen() {\n  const data = Array.from({ length: 50 }, (_, index) =\u003e ({\n    id: `item-${index}`,\n    title: `Item ${index + 1}`,\n    description: 'Lorem ipsum dolor sit amet',\n  }));\n  const title = 'Animated Title';\n\n  const renderItem = useCallback(\n    ({\n      item,\n    }: {\n      item: { id: string; title: string; description: string };\n    }) =\u003e (\n      \u003cView style={styles.listItem}\u003e\n        \u003cText style={styles.itemTitle}\u003e{item.title}\u003c/Text\u003e\n        \u003cText style={styles.itemDescription}\u003e{item.description}\u003c/Text\u003e\n      \u003c/View\u003e\n    ),\n    []\n  );\n\n  return (\n    \u003cAnimatedHeaderFlatList\n      title={title}\n      headerTitleStyle={styles.headerTitle}\n      navigationTitleStyle={styles.navigationTitle}\n      HeaderBackground={HeaderBackground}\n      HeaderContent={HeaderContent}\n      StickyComponent={StickyComponent}\n      data={data}\n      renderItem={renderItem}\n    /\u003e\n  );\n}\n\nconst HeaderBackground = () =\u003e {\n  const backgroundImageUrl =\n    'https://images.unsplash.com/photo-1579546929518-9e396f3cc809';\n\n  return (\n    \u003cImageBackground\n      source={{ uri: backgroundImageUrl }}\n      style={styles.headerBackground}\n    /\u003e\n  );\n};\n\nconst HeaderContent = () =\u003e {\n  const avatarUrl = 'https://api.dicebear.com/7.x/avataaars/png?seed=John';\n\n  return (\n    \u003cView style={styles.headerContent}\u003e\n      \u003cImage source={{ uri: avatarUrl }} style={styles.avatar} /\u003e\n    \u003c/View\u003e\n  );\n};\n\nconst StickyComponent = () =\u003e (\n  \u003cText style={styles.stickyComponent}\u003eSticky Item\u003c/Text\u003e\n);\n\nconst styles = StyleSheet.create({\n  headerBackground: {\n    backgroundColor: 'white',\n    height: 300,\n    width: '100%',\n  },\n  headerContent: {\n    height: 300,\n    width: '100%',\n  },\n  avatar: {\n    position: 'absolute',\n    top: 80,\n    left: 10,\n    backgroundColor: 'white',\n    width: 120,\n    height: 120,\n    borderRadius: 60,\n    borderWidth: 2,\n    borderColor: 'white',\n  },\n  headerTitle: {\n    position: 'absolute',\n    top: 200,\n    left: 10,\n    fontSize: 30,\n    fontWeight: 'bold',\n    color: 'white',\n  },\n  navigationTitle: {\n    fontSize: 18,\n    fontWeight: '600',\n    color: 'white',\n  },\n  stickyComponent: {\n    backgroundColor: 'white',\n    padding: 15,\n    borderWidth: 1,\n    borderColor: '#EEEEEE',\n  },\n  listItem: {\n    padding: 15,\n    borderBottomWidth: 1,\n    borderBottomColor: '#EEEEEE',\n    backgroundColor: 'white',\n  },\n  itemTitle: {\n    fontSize: 16,\n    fontWeight: '600',\n  },\n  itemDescription: {\n    fontSize: 14,\n    color: '#666666',\n    marginTop: 4,\n  },\n});\n```\n\n### 属性\n\n| 属性                        | 类型                 | 是否必需 | 描述                                                                         |\n| --------------------------- | -------------------- | -------- | ---------------------------------------------------------------------------- |\n| `title`                     | string               | 是       | 在 Header 和 NavigationBar 之间动画过渡的标题文本                            |\n| `headerTitleStyle`          | StyleProp\u003cTextStyle\u003e | 否       | Header 标题的样式对象。支持所有 Text 样式属性。位置相对于 HeaderContent      |\n| `navigationTitleStyle`      | StyleProp\u003cTextStyle\u003e | 否       | NavigationBar 标题的样式对象。支持除位置相关属性外的所有 Text 样式属性       |\n| `HeaderBackground`          | React.ComponentType  | 是       | 渲染为 Header 背景的组件                                                     |\n| `HeaderContent`             | React.ComponentType  | 否       | 渲染在 Header 背景之上的组件。其透明度会根据滚动位置自动动画                |\n| `StickyComponent`           | React.ComponentType  | 否       | 可选的粘性组件，会固定在 NavigationBar 下方                                  |\n| `parallax`                  | boolean              | 否       | 启用/禁用头部背景的视差效果。默认为 true                                     |\n| `navigationBarColor`        | ColorValue           | 否       | NavigationBar 的颜色。其透明度会根据滚动位置自动动画                         |\n| `navigationTitleTranslateX` | number               | 否       | 导航栏标题的水平偏移量。默认为 0                                             |\n| `navigationTitleTranslateY` | number               | 否       | 导航栏标题的垂直偏移量。默认为 0                                             |\n| `...FlatListProps`          | FlatListProps        | -        | 支持所有标准的 FlatList 属性                                                 |\n\n## 贡献\n\n查看[贡献指南](CONTRIBUTING.md)了解如何为该仓库做出贡献以及开发工作流程。\n\n## 许可证\n\nMIT\n\n---\n\n使用 [create-react-native-library](https://github.com/callstack/react-native-builder-bob) 创建\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukailun%2Freact-native-animated-header-flat-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukailun%2Freact-native-animated-header-flat-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukailun%2Freact-native-animated-header-flat-list/lists"}