From d615af1a31d4f0c852eccf29036b5e572965da51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=83=A1=E5=BA=B7?= Date: Wed, 27 Dec 2023 20:37:44 +0800 Subject: [PATCH] =?UTF-8?q?[Issues:=20#I8RW89]=20=E6=9B=B4=E6=96=B0vamll?= =?UTF-8?q?=E7=89=88react-native-smartrefreshlayout=E5=88=B0=E6=A8=A1?= =?UTF-8?q?=E7=89=88v0.1.2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vmall/react-native-SmartRefreshLayout.md | 193 +++++++++++++---------- 1 file changed, 112 insertions(+), 81 deletions(-) diff --git a/vmall/react-native-SmartRefreshLayout.md b/vmall/react-native-SmartRefreshLayout.md index 2d101dc7c..b6e6d62cb 100644 --- a/vmall/react-native-SmartRefreshLayout.md +++ b/vmall/react-native-SmartRefreshLayout.md @@ -1,4 +1,4 @@ -> 模板版本：v0.1.1 +> 模板版本：v0.1.2

react-native-SmartRefreshLayout

@@ -19,6 +19,7 @@ 进入到工程目录并输入以下命令： + #### **yarn** ```bash @@ -36,30 +37,38 @@ npm install @react-native-oh-tpl/react-native-smartrefreshlayout 下面的代码展示了这个库的基本使用场景： ```js -import React, { useState } from 'react'; -import { View, Text, FlatList, StyleSheet ,TouchableOpacity} from 'react-native'; -import { SmartRefreshControl,AnyHeader} from 'react-native-smartrefreshlayout'; +import React, { useState } from "react"; +import { + View, + Text, + FlatList, + StyleSheet, + TouchableOpacity, +} from "react-native"; +import { + SmartRefreshControl, + AnyHeader, +} from "react-native-smartrefreshlayout"; const App = () => { const [text, setText] = useState("状态"); const [text1, setText1] = useState("刷新时间"); const [headerHeight, setHeaderHeight] = useState(66); - const [color, setColor] = useState('#fff000'); - + const [color, setColor] = useState("#fff000"); const [data, setData] = useState([ - { id: 1, text: 'Item 1' }, - { id: 2, text: 'Item 2' }, - { id: 3, text: 'Item 3' }, - { id: 4, text: 'Item 4' }, - { id: 5, text: 'Item 5' }, - { id: 6, text: 'Item 6' }, - { id: 7, text: 'Item 7' }, - { id: 8, text: 'Item 8' }, - { id: 9, text: 'Item 9' }, - { id: 10, text: 'Item 10' }, - { id: 11, text: 'Item 11' }, + { id: 1, text: "Item 1" }, + { id: 2, text: "Item 2" }, + { id: 3, text: "Item 3" }, + { id: 4, text: "Item 4" }, + { id: 5, text: "Item 5" }, + { id: 6, text: "Item 6" }, + { id: 7, text: "Item 7" }, + { id: 8, text: "Item 8" }, + { id: 9, text: "Item 9" }, + { id: 10, text: "Item 10" }, + { id: 11, text: "Item 11" }, // ... more data ... ]); @@ -80,54 +89,70 @@ const App = () => { {item.text} ); - let smartRefreshControlRef:React.RefObject; + let smartRefreshControlRef: React.RefObject; return ( - - {smartRefreshControlRef.finishRefresh({delayed:-1,success:true})}}> - finish - - - - {setHeaderHeight(headerHeight == 66?132:66)}}> - 切换高度 66/132 - - - {setColor(color === "#fff000"?"red":"#fff000")}}> - 切换颜色（正在刷新中不支持切换背景色） - + + { + smartRefreshControlRef.finishRefresh({ delayed: -1, success: true }); + }} + > + + finish + + + + { + setHeaderHeight(headerHeight == 66 ? 132 : 66); + }} + > + + 切换高度 66/132 + + + + { + setColor(color === "#fff000" ? "red" : "#fff000"); + }} + > + + 切换颜色（正在刷新中不支持切换背景色） + + - + {text} - - + + {text1} - - smartRefreshControlRef=ref} - primaryColor={color} - headerHeight={headerHeight} - style={{ height:500,width:'100%',backgroundColor:"#ffcc00"}} - onHeaderMoving={(e)=>{ - setText('onHeaderMoving' + JSON.stringify(e.nativeEvent)) - }} - onRefresh={ - ()=>{ - setText1('时间：' + new Date().getTime() + "onRefresh触发刷新") + + (smartRefreshControlRef = ref)} + primaryColor={color} + headerHeight={headerHeight} + style={{ height: 500, width: "100%", backgroundColor: "#ffcc00" }} + onHeaderMoving={(e) => { + setText("onHeaderMoving" + JSON.stringify(e.nativeEvent)); + }} + onRefresh={() => { + setText1("时间：" + new Date().getTime() + "onRefresh触发刷新"); + }} + HeaderComponent={ + + {text} + } - } - HeaderComponent={ - {text} - } - - > - item.id.toString()} - /> - + > + item.id.toString()} + /> + ); }; @@ -136,9 +161,9 @@ const styles = StyleSheet.create({ item: { padding: 16, borderBottomWidth: 1, - borderBottomColor: '#ccc', - width:100, - height:100, + borderBottomColor: "#ccc", + width: 100, + height: 100, }, }); @@ -313,26 +338,30 @@ ohpm install ## 属性 +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + **组件 SmartRefreshControl** -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| --------------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------------- | -------- | -------- | -------- | -| `HeaderComponent` | 用于渲染 SmartRefreshLayout 组件的 header,默认为 DefaultHeader。 | Element | No | Android | Yes | -| `renderHeader` | 用于渲染 SmartRefreshLayout 组件的 header,默认为 DefaultHeader。 | Element/func | No | Android | No | -| `enableRefresh` | 是否启用下拉刷新,默认为 true | boolean | No | Android | No | -| `headerHeight` | 设定 header 的高度 | number | No | Android | Yes | -| `primaryColor` | 设置刷新组件的主调色 | string | No | Android | Yes | -| `autoRefresh` | 是否自动刷新 | object:{refresh:boolean, time:number} | No | Android | No | -| `pureScroll` | 是否启用纯滚动 | boolean | No | Android | No | -| `overScrollBounce` | 是否启用越界拖动，类似 IOS 样式。 | boolean | No | Android | No | -| `dragRate` | 设置组件下拉高度与手指真实下拉高度的比值,默认为 0.5。 | number | No | Android | No | -| `maxDragRate` | 设置最大显示下拉高度与 header 标准高度的比值，默认为 2.0。 | number | No | Android | No | -| `onPullDownToRefresh` | 可下拉刷新时触发 | function | No | Android | No | -| `onReleaseToRefresh` | 可释放刷新时触发 | function | No | Android | No | -| `onRefresh` | 刷新时触发 | function | No | Android | Yes | -| `onHeaderReleased` | Header 释放时触发 | function | No | Android | No | -| `onHeaderMoving` | header 移动过程中触发,包括下拉过程和释放过程。 | ({nativeEvent: {percent:number, offset:number, headerHeight:number}})=>void; | No | Android | Yes | -| `finishRefresh` | 完成刷新 | Methods | No | Android | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------------- | -------- | -------- | ----------------- | +| `HeaderComponent` | 用于渲染 SmartRefreshLayout 组件的 header,默认为 DefaultHeader。 | Element | No | Android | Yes | +| `renderHeader` | 用于渲染 SmartRefreshLayout 组件的 header,默认为 DefaultHeader。 | Element/func | No | Android | No | +| `enableRefresh` | 是否启用下拉刷新,默认为 true | boolean | No | Android | No | +| `headerHeight` | 设定 header 的高度 | number | No | Android | Yes | +| `primaryColor` | 设置刷新组件的主调色 | string | No | Android | Yes | +| `autoRefresh` | 是否自动刷新 | object:{refresh:boolean, time:number} | No | Android | No | +| `pureScroll` | 是否启用纯滚动 | boolean | No | Android | No | +| `overScrollBounce` | 是否启用越界拖动，类似 IOS 样式。 | boolean | No | Android | No | +| `dragRate` | 设置组件下拉高度与手指真实下拉高度的比值,默认为 0.5。 | number | No | Android | No | +| `maxDragRate` | 设置最大显示下拉高度与 header 标准高度的比值，默认为 2.0。 | number | No | Android | No | +| `onPullDownToRefresh` | 可下拉刷新时触发 | function | No | Android | No | +| `onReleaseToRefresh` | 可释放刷新时触发 | function | No | Android | No | +| `onRefresh` | 刷新时触发 | function | No | Android | Yes | +| `onHeaderReleased` | Header 释放时触发 | function | No | Android | No | +| `onHeaderMoving` | header 移动过程中触发,包括下拉过程和释放过程。 | ({nativeEvent: {percent:number, offset:number, headerHeight:number}})=>void; | No | Android | Yes | +| `finishRefresh` | 完成刷新 | Methods | No | Android | Yes | **组件 AnyHeader** @@ -365,6 +394,8 @@ ohpm install ## 遗留问题 +- [ ] SmartRefreshLayout 包裹 FlatList 组件，多次下拉刷新，item 会回弹。[Issue #11 ](https://github.com/react-native-oh-library/react-native-SmartRefreshLayout/issues/11) + ## 其他 ## 开源协议 -- Gitee