From 1824f82097a89f5161de6afb1eae5708b47bb801 Mon Sep 17 00:00:00 2001
From: LuQian-KUN <894718128@qq.com>
Date: Fri, 8 Mar 2024 16:42:18 +0800
Subject: [PATCH] =?UTF-8?q?[Issues:=20#I96ZDX]=20=E6=B7=BB=E5=8A=A0react-n?=
 =?UTF-8?q?ative-drawer-layout-polyfill=E6=93=8D=E4=BD=9C=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 1224/react-native-stickyheader.md | 137 ++++++++++++++++++++++++++++++
 1 file changed, 137 insertions(+)
 create mode 100644 1224/react-native-stickyheader.md

diff --git a/1224/react-native-stickyheader.md b/1224/react-native-stickyheader.md
new file mode 100644
index 00000000..dd28247a
--- /dev/null
+++ b/1224/react-native-stickyheader.md
@@ -0,0 +1,137 @@
+> 模板版本：v0.1.3
+
+<p align="center">
+  <h1 align="center"> <code>react-native-stickyheader</code> </h1>
+</p>
+<p align="center">
+    <a href="https://github.com/react-native-oh-library/react-native-stickyheader/tree/sig_dev/LICENSE">
+        <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License" />
+    </a>
+</p> 
+
+## 介绍
+此组件实现类似React Native ScrollView组件的吸顶效果。 使用原生驱动动画，支持FlatList,SectionList,ListView等有onScroll方法的组件。
+
+> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-stickyheader/tree/sig_dev)
+## 安装与使用
+
+请到三方库的 Releases 发布地址查看配套的版本信息：[<@react-native-oh-tpl/react-native-stickyheader> Releases](https://github.com/react-native-oh-library/react-native-stickyheader/releases)，并下载适用版本的 tgz 包。
+
+进入到工程目录并输入以下命令：
+
+> [!TIP] # 处替换为 tgz 包的路径
+
+<!-- tabs:start -->
+
+#### **npm**
+
+```bash
+npm install @react-native-oh-tpl/react-native-stickyheader@file:#
+```
+
+#### **yarn**
+
+```bash
+yarn add @react-native-oh-tpl/react-native-stickyheader@file:#
+```
+
+<!-- tabs:end -->
+
+下面的代码展示了这个库的基本使用场景：
+
+> [!WARNING] 使用时 import 的库名不变。
+
+```tsx
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import { StyleSheet, Text, View, FlatList, Animated } from 'react-native';
+import StickyHeader from 'react-native-stickyheader';
+
+function App() {
+  const scrollY = useRef(new Animated.Value(0));
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    let array = [];
+    for (let index = 0; index < 100; index++) {
+      array.push(index);
+    }
+    setData(array);
+  }, []);
+
+  const renderItem = useCallback((info) => {
+    return (
+      <View style={{ height: 50, backgroundColor: '#ffffff' }}>
+        <Text>{info.item}</Text>
+      </View>
+    );
+  }, []);
+
+  const keyExtractor = useCallback((item, index) => {
+    return index + '';
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <View style={{ height: 64, backgroundColor: '#973444' }} />
+      <Animated.ScrollView
+        onScroll={Animated.event(
+          [
+            {
+              nativeEvent: { contentOffset: { y: scrollY.current } },
+            },
+          ],
+          { useNativeDriver: true },
+        )}
+        scrollEventThrottle={1}
+      >
+        <Text>文字</Text>
+        <Text>文字</Text>
+        <Text>文字</Text>
+        <Text>文字</Text>
+        <StickyHeader
+          stickyHeaderY={60} // 滑动到多少悬浮
+          stickyScrollY={scrollY.current}
+        >
+          <View style={{ height: 60, backgroundColor: '#d22222' }} />
+        </StickyHeader>
+        <FlatList
+          data={data}
+          keyExtractor={keyExtractor}
+          renderItem={renderItem}
+        />
+      </Animated.ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#ffffff',
+    justifyContent: 'center',
+  },
+});
+
+export default App;
+```
+Note: scrollEventThrottle={1}此属性必须设置且为1,因为要保证有足够的偏移量回调。
+
+## 兼容性
+
+本文档内容基于以下版本验证通过：
+
+RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.59;
+
+## 属性
+### 此组件有以下属性:
+
+| Property      | Type   | Required | Description   |
+|---------------|--------|----------|---------------|
+| stickyHeaderY | number | NO       | 滑动到多少悬浮   |
+| stickyScrollY | any    | Yes      | 动画的ScrollY回调|
+
+## 其他
+
+## 开源协议
+
+本项目基于 [MIT License](https://github.com/react-native-oh-library/react-native-stickyheader/blob/sig_dev/LICENSE) ，请自由地享受和参与开源。
-- 
Gitee