使用react native制作可折叠的粘性标题动画-CSDN博客

Recently I had to develop a collapsible or multi-layered sticky header in React Native for a project, I spent some time looking at how I would go about implementing, and at that time I would have preferred to have found a tutorial on achieving the same. Since I couldn’t find one as per my requirements. I decided to write a tutorial on the same.

最近，我不得不在React Native中为一个项目开发一个可折叠或多层的粘性标头，我花了一些时间看我将如何实现，而那时我宁愿找到一个关于实现相同目标的教程。由于我找不到符合我要求的产品。我决定在同一篇文章上写一个教程。

我们正在建造什么 (What we are building)

The header hides and reveals based on the direction of the scroll and once the scrolling is stopped, the header conveniently snaps to the closest state i.e either half-hidden or fully revealed. This effect can be seen in apps like WhatsApp, Youtube, Telegram, etc. We’d be using React Native’s Animated API to build this so let’s get started!

页眉根据滚动方向隐藏和显示，一旦滚动停止，页眉便会方便地捕捉到最接近的状态，即半隐藏或完全显示。可以在WhatsApp，Youtube，Telegram等应用程序中看到这种效果。我们将使用React Native的Animated API来构建此效果，所以让我们开始吧！

I made a starter template that would save us some time by focusing on the topic of animations in this article. So I recommend you to clone the repository and follow along :)

我制作了一个入门模板 ，可以通过重点关注动画主题来节省一些时间。因此，我建议您克隆存储库并遵循:)

设置入门模板的说明 (Instructions to setup the starter template)

Clone the repository
克隆存储库

git clone https://github.com/frzkn/rn-collapsible-header

2. Installing dependencies

2.安装依赖项

cd rn-collapsible-header && yarn

3. Switch to starter branch

3.切换到入门分支

git checkout starter

4. Starting the metro bundler

4.启动地铁打包机

yarn start

4. Starting it on a device (Android in my case)

4.在设备上启动(在我的情况下为Android)

yarn android

N

ñ

打开App.js并查看已经为我们完成的工作 (Open up App.js & see what’s already done for us)

import React, {useRef} from 'react';
import {
  FlatList,
  View,
  SafeAreaView,
  StatusBar,
  StyleSheet,
} from 'react-native';
import Header from './components/Header';
import ListItem from './components/ListItem';
import {generateData} from './data';


const headerHeight = 58 * 2;


const App = () => {
  const data = generateData(25);
  const ref = useRef(null);


  return (
    <SafeAreaView style={styles.container}>
      <StatusBar backgroundColor="#1c1c1c" style="light" />
      <View style={[styles.header]}>
        <Header {...{headerHeight}} />
      </View>
      <FlatList
        scrollEventThrottle={16}
        contentContainerStyle={
       {paddingTop: headerHeight}}
        ref={ref}
        data={data}
        renderItem={ListItem}
        keyExtractor={(item, index) => `list-item-${index}-${item.color}`}
      />
    </SafeAreaView>
  );
};


const styles = StyleSheet.create({
  header: {
    position: &