diff --git a/1224/react-native-stickyheader.md b/1224/react-native-stickyheader.md new file mode 100644 index 0000000000000000000000000000000000000000..dd28247a66f58e24ff757542b2014dc7c458f1ab --- /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) ,请自由地享受和参与开源。