React Native 动画头部滚动视图

高性能的动画滚动视图组件，具有以下特点：

• 🔥支持 FlatList 和 ScrollView 滚动交互。
• 🔥将图像或自定义组件动画化为导航栏头部
• 🔥支持向下滚动时的弹跳动画
• 🔥同时支持 iOS 和 Android 设备

安装

$ npm install @kanelloc/react-native-animated-header-scroll-view

使用方法

import { Card, TopNavBar, HeaderNavBar } from '../components';
import { AnimatedScrollView } from '@kanelloc/react-native-animated-header-scroll-view';
import * as React from 'react';

export const App = () => {
  const data = Array.from(Array(20).keys());
  return (
    <AnimatedScrollView
      HeaderNavbarComponent={<HeaderNavBar />}
      TopNavBarComponent={<TopNavBar />}
      headerImage={require('../../assets/cabin.jpg')}
    >
      {data.map((e) => {
        return <Card item={e} key={e} />;
      })}
    </AnimatedScrollView>
  );
};

import { Card, TopNavBar, HeaderNavBar } from '../components';
import { AnimatedScrollView } from '@kanelloc/react-native-animated-header-scroll-view';
import * as React from 'react';

export const App = () => {
  const data = Array.from(Array(20).keys());
  const renderItem = ({ item }: any) => {
    return (
      <View>
        <Card item={item} />
      </View>
    );
  };

  return (
    <AnimatedFlatList
      headerImage={require('../../assets/cabin.jpg')}
      data={data}
      renderItem={renderItem}
      HeaderNavbarComponent={<HeaderNavBar />}
      TopNavBarComponent={<TopNavBar />}
    />
  );
};

您可以在这里找到一系列详细的示例

还有一个运行中的 Snack 在这里

属性

贡献

查看贡献指南了解如何为该仓库做出贡献以及开发工作流程。

许可证

MIT