From 2eb606560fed2ef20317bcbb8a13a4f3e4d753b3 Mon Sep 17 00:00:00 2001 From: LuQian-KUN <894718128@qq.com> Date: Fri, 8 Mar 2024 16:52:42 +0800 Subject: [PATCH 1/2] =?UTF-8?q?[Issues:=20#I96ZDX]=20=E6=B7=BB=E5=8A=A0rea?= =?UTF-8?q?ct-native-stickyheader=E6=93=8D=E4=BD=9C=E6=96=87=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 + +

+

react-native-stickyheader

+

+

+ + License + +

+ +## 介绍 +此组件实现类似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 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-stickyheader@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-stickyheader@file:# +``` + + + +下面的代码展示了这个库的基本使用场景: + +> [!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 ( + + {info.item} + + ); + }, []); + + const keyExtractor = useCallback((item, index) => { + return index + ''; + }, []); + + return ( + + + + 文字 + 文字 + 文字 + 文字 + + + + + + + ); +} + +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 From bf4c40d039dddc72a5716ad90f8bf737e7a3a1d1 Mon Sep 17 00:00:00 2001 From: LuQian-KUN <894718128@qq.com> Date: Mon, 11 Mar 2024 15:08:30 +0800 Subject: [PATCH 2/2] =?UTF-8?q?[Issues:=20#I96ZDX]=20=E6=B7=BB=E5=8A=A0rea?= =?UTF-8?q?ct-native-stickyheader=E6=93=8D=E4=BD=9C=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-stickyheader.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/1224/react-native-stickyheader.md b/1224/react-native-stickyheader.md index dd28247a..10ec37c5 100644 --- a/1224/react-native-stickyheader.md +++ b/1224/react-native-stickyheader.md @@ -4,7 +4,7 @@

react-native-stickyheader

- + License

@@ -12,7 +12,7 @@ ## 介绍 此组件实现类似React Native ScrollView组件的吸顶效果。 使用原生驱动动画,支持FlatList,SectionList,ListView等有onScroll方法的组件。 -> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-stickyheader/tree/sig_dev) +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-stickyheader/tree/sig) ## 安装与使用 请到三方库的 Releases 发布地址查看配套的版本信息:[<@react-native-oh-tpl/react-native-stickyheader> Releases](https://github.com/react-native-oh-library/react-native-stickyheader/releases),并下载适用版本的 tgz 包。 @@ -125,13 +125,13 @@ RNOH:0.72.13; SDK:HarmonyOS NEXT Developer Preview1; IDE:DevEco Studio 4.1 ## 属性 ### 此组件有以下属性: -| Property | Type | Required | Description | -|---------------|--------|----------|---------------| -| stickyHeaderY | number | NO | 滑动到多少悬浮 | -| stickyScrollY | any | Yes | 动画的ScrollY回调| +| Property | Type | Required | Description | Platform | HarmonyOS
Support | +|---------------|--------|----------|---------------|-----|-----| +| StickyHeaderY | number | NO | 滑动到多少悬浮 | Android
IOS | YES | +| StickyScrollY | any | Yes | 动画的ScrollY回调| Android
IOS | YES | ## 其他 ## 开源协议 -本项目基于 [MIT License](https://github.com/react-native-oh-library/react-native-stickyheader/blob/sig_dev/LICENSE) ,请自由地享受和参与开源。 +本项目基于 [MIT License](https://github.com/react-native-oh-library/react-native-stickyheader/blob/sig/LICENSE) ,请自由地享受和参与开源。 -- Gitee