diff --git a/vmall/react-native-SmartRefreshLayout.md b/vmall/react-native-SmartRefreshLayout.md
index 2d101dc7c26703a6f48c29132ae214a3e55cf3b4..b6e6d62cb50617842e851fbc3ec8dd714165dc6a 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)
+
## 其他
## 开源协议