diff --git a/README.md b/README.md index 4a99e11aba545502f007b363b3237c656848cea2..6bdb0094589e067ec087bc3953d412b6bd14cc69 100644 --- a/README.md +++ b/README.md @@ -8,18 +8,23 @@ ## RNOH 三方库总览 -| 序号 | 原库名 | 原库基线版本 | 原库是否支持新架构 | 鸿蒙化进度 | 已发布的最新版本 | 文档链接 +>[!tip] NPM 公仓坐标：@react-native-oh-tpl + +>[!tip] NPM Github Packages 私仓坐标：@react-native-oh-library + +| 序号 | 原库名 | 原库基线版本 | 原库是否支持新架构 | 鸿蒙化进度 | Releases | 文档链接 |:---:| :----------: |:-------------:| :----------: | :----------: | :----------: | :----------: | -| 1 | @react-native-async-storage/async-storage | 1.19.5 | 是 | 100% | [@react-native-oh-library/async-storage@1.19.5-0.0.3](https://github.com/react-native-oh-library/async-storage/releases/tag/1.19.5-0.0.3) | [链接](zh-cn/async-storage.md) | -| 2 | @react-native-picker/picker | 2.5.1 | 否 | 90% | [@react-native-oh-library/picker@2.5.1-0.0.1](https://github.com/react-native-oh-library/picker/releases/tag/2.5.1-0.0.1) | [链接](zh-cn/picker.md) | -| 3 | @react-native-community/checkbox | 0.5.16 | 否 | 100% | [@react-native-oh-library/checkbox@0.5.16-0.0.1](https://github.com/react-native-oh-library/react-native-checkbox/releases/tag/0.5.16-0.0.1) | [链接](zh-cn/react-native-checkbox.md) | -| 4 | @react-native-community/slider | 4.4.3 | 是 | 90% | [@react-native-oh-library/slider@4.4.3-0.1.1](https://github.com/react-native-oh-library/react-native-slider/releases/tag/4.4.3-0.1.1) | [链接](zh-cn/react-native-slider.md) | -| 5 | @react-native-masked-view/masked-view | 0.2.9 | 否 | 90% | [@react-native-oh-library/masked-view@0.2.9-0.0.1](https://github.com/react-native-oh-library/masked-view/releases/tag/0.2.9-0.0.1) | [链接](zh-cn/react-native-masked-view.md) | -| 6 | @react-native-community/checkbox | 0.5.16 | 否 | 100% | [@react-native-oh-library/checkbox@0.5.16-0.0.2](https://github.com/react-native-oh-library/react-native-checkbox/releases/tag/0.5.16-0.0.2) | [链接](zh-cn/react-native-checkbox.md) | -| 7 | react-native-linear-gradient | 3.0.0-alpha.1 | 是 | 90% | [@react-native-oh-library/react-native-linear-gradient@3.0.0-alpha.1-0.2.4](https://github.com/react-native-oh-library/react-native-linear-gradient/releases/tag/3.0.0-alpha.1-0.2.4) | [链接](zh-cn/react-native-linear-gradient.md) | -| 8 | @react-native-community/progress-bar-android | 1.0.4 | 是 | 90% | [@react-native-community/progress-bar-android@1.0.4-0.0.3](https://github.com/react-native-oh-library/progress-bar-android/releases/tag/1.0.4-0.0.3) | [链接](zh-cn/progress-bar-android.md) | -| 9 | react-native-fast-image | 8.6.3 | 否 | 70% | [@react-native-oh-tpl/react-native-fast-image@8.6.3-0.0.2](https://github.com/react-native-oh-library/react-native-fast-image/releases/tag/8.6.3-0.0.2) | [链接](zh-cn/react-native-fast-image.md) | -| 10 | @react-native-clipboard/clipboard | 1.12.1 | 是 | 80% | [@react-native-clipboard/clipboard@1.12.1-0.0.1](https://github.com/react-native-oh-library/clipboard/releases/tag/1.12.1-0.0.1) | [链接](zh-cn/clipboard.md) | +| 1 | @react-native-async-storage/async-storage | 1.19.5 | 是 | 100% | [@react-native-oh-library/async-storage](https://github.com/react-native-oh-library/async-storage/releases) | [链接](zh-cn/async-storage.md) | +| 2 | @react-native-clipboard/clipboard | 1.12.1 | 是 | 80% | [@react-native-oh-library/clipboard](https://github.com/react-native-oh-library/clipboard/releases) | [链接](zh-cn/clipboard.md) | +| 3 | @react-native-picker/picker | 2.5.1 | 否 | 90% | [@react-native-oh-library/picker](https://github.com/react-native-oh-library/picker/releases) | [链接](zh-cn/picker.md) | +| 4 | @react-native-community/progress-bar-android | 1.0.4 | 是 | 90% | [@react-native-oh-library/progress-bar-android](https://github.com/react-native-oh-library/progress-bar-android/releases) | [链接](zh-cn/progress-bar-android.md) | +| 5 | @react-native-community/checkbox | 0.5.16 | 否 | 100% | [@react-native-oh-library/checkbox](https://github.com/react-native-oh-library/react-native-checkbox/releases) | [链接](zh-cn/react-native-checkbox.md) | +| 6 | react-native-fast-image | 8.6.3 | 否 | 70% | [@react-native-oh-tpl/react-native-fast-image](https://github.com/react-native-oh-library/react-native-fast-image/releases) | [链接](zh-cn/react-native-fast-image.md) | +| 7 | react-native-linear-gradient | 3.0.0-alpha.1 | 是 | 90% | [@react-native-oh-tpl/react-native-linear-gradient](https://github.com/react-native-oh-library/react-native-linear-gradient/releases) | [链接](zh-cn/react-native-linear-gradient.md) | +| 8 | @react-native-masked-view/masked-view | 0.2.9 | 否 | 90% | [@react-native-oh-library/masked-view](https://github.com/react-native-oh-library/masked-view/releases) | [链接](zh-cn/react-native-masked-view.md) | +| 9 | @react-native-community/slider | 4.4.3 | 是 | 90% | [@react-native-oh-library/slider](https://github.com/react-native-oh-library/react-native-slider/releases) | [链接](zh-cn/react-native-slider.md) | +| 10 | react-native-SmartRefreshLayout | 0.6.7 | 否 | 70% | [@react-native-oh-library/react-native-SmartRefreshLayout](https://github.com/react-native-oh-library/react-native-SmartRefreshLayout/releases) | [链接](zh-cn/react-native-SmartRefreshLayout.md) | + ## 社区 [react-native-oh-library](https://github.com/react-native-oh-library) \ No newline at end of file diff --git a/_sidebar.md b/_sidebar.md index 386e360fc579c5143df8d4c15fb42abae5cf40df..09a88926185a75f5d13fae65aa9eb1c3be26c562 100644 --- a/_sidebar.md +++ b/_sidebar.md @@ -4,10 +4,18 @@ - 三方库说明文档合集 - [@react-native-async-storage/async-storage](zh-cn/async-storage.md) - - [@react-native-community/slider](zh-cn/react-native-slider.md) - - [@react-native-community/checkbox](zh-cn/react-native-checkbox.md) + - [@react-native-clipboard/clipboard](zh-cn/clipboard.md) - [@react-native-picker/picker](zh-cn/picker.md) - [@react-native-community/progress-bar-android](zh-cn/progress-bar-android.md) + - [@react-native-community/checkbox](zh-cn/react-native-checkbox.md) - [react-native-fast-image](zh-cn/react-native-fast-image.md) - - [@react-native-clipboard/clipboard](zh-cn/clipboard.md) + - [react-native-linear-gradient](zh-cn/react-native-linear-gradient.md) + - [@react-native-masked-view/masked-view](zh-cn/react-native-masked-view.md) + - [@react-native-community/slider](zh-cn/react-native-slider.md) + - [react-native-SmartRefreshLayout](zh-cn/react-native-SmartRefreshLayout.md) + + + + + diff --git a/zh-cn/progress-bar-android.md b/zh-cn/progress-bar-android.md index 55b4e1565ef9eccc7602f84c068ccea5470cd6e7..dfa31d54024a381b79f2b75bb2f6c1afd5637438 100644 --- a/zh-cn/progress-bar-android.md +++ b/zh-cn/progress-bar-android.md @@ -194,24 +194,24 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 | ` @react-native-oh-library/progress-bar-android` Version | Required React Native Version | Required RNOH Version | Required DevEco Studio Version | Required ROM Version | Required SDK Version | -| ---------------------------------------- | ----------------------------- | --------------------- | ------------------------------ | --------------------- | ----------------------- | -| `1.0.4-0.0.3` | `0.72.5` | `0.72.10` | `4.0.3.700` | `OpenHarmony 4.10.10` | `OpenHarmony 4.0.10.15` | +| -------------------------------------------------------- | ----------------------------- | --------------------- | ------------------------------ | --------------------- | ----------------------- | +| `1.0.4-0.0.3` | `0.72.5` | `0.72.10` | `4.0.3.700` | `OpenHarmony 4.10.10` | `OpenHarmony 4.0.10.15` | ## 属性 Inherits [View Props](https://reactnative.dev/docs/view#props). -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| --------------- | ---------------------------------------- | ---------------------------------------- | ---- | ------- | ---- | -| `animating` | Whether to show the ProgressBar (true, the default) or hide it (false). | bool | No | Android | yes | -| `color` | Color of the progress bar. | [color](https://reactnative.dev/docs/colors) | No | Android | yes | -| `indeterminate` | If the progress bar will show indeterminate progress. Note that this can only be false if styleAttr is Horizontal, and requires a `progress` value. | indeterminateType | No | Android | yes | -| `progress` | The progress value (between 0 and 1). | number | No | Android | yes | -| `styleAttr` | Style of the ProgressBar. | One of:
Horizontal
Normal (default)
Small
Large
Inverse
SmallInverse
LargeInverse | No | Android | yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | +| `animating` | Whether to show the ProgressBar (true, the default) or hide it (false). | bool | No | Android | yes | +| `color` | Color of the progress bar. | [color](https://reactnative.dev/docs/colors) | No | Android | yes | +| `indeterminate` | If the progress bar will show indeterminate progress. Note that this can only be false if styleAttr is Horizontal, and requires a `progress` value. | indeterminateType | No | Android | yes | +| `progress` | The progress value (between 0 and 1). | number | No | Android | yes | +| `styleAttr` | Style of the ProgressBar. | One of:
Horizontal
Normal (default)
Small
Large
Inverse
SmallInverse
LargeInverse | No | Android | yes | ## 遗留问题 -- [ ] styleAttr为Horizontal 时无法铺满全屏 [issues#4](https://github.com/react-native-oh-library/progress-bar-android/issues/4)。 +- [ ] styleAttr 为 Horizontal 时无法铺满全屏 [issues#4](https://github.com/react-native-oh-library/progress-bar-android/issues/4)。 ## 其他 diff --git a/zh-cn/react-native-SmartRefreshLayout.md b/zh-cn/react-native-SmartRefreshLayout.md index e5f04ad5dc1eb6b1cf029520e77160c87a638b3a..0bdf6f959facac6986dc0a09c76794d88c6ab08d 100644 --- a/zh-cn/react-native-SmartRefreshLayout.md +++ b/zh-cn/react-native-SmartRefreshLayout.md @@ -9,6 +9,7 @@ License +

## 安装与使用 @@ -28,35 +29,37 @@ npm install xxx 下面的代码展示了这个库的基本使用场景： ```js -import { SmartRefreshControl,AnyHeader} from 'react-native-smartrefreshlayout'; +import { + SmartRefreshControl, + AnyHeader, +} from "react-native-smartrefreshlayout"; smartRefreshControlRef=ref} - primaryColor='#f3f3f3' + ref={(ref) => (smartRefreshControlRef = ref)} + primaryColor="#f3f3f3" headerHeight={66} - style={{ height:500,width:'100%',backgroundColor:"#ffcc00"}} + style={{ height: 500, width: "100%", backgroundColor: "#ffcc00" }} enableRefresh enableLoadMore - onHeaderMoving={(e)=>{ - setText('onHeaderMoving' + JSON.stringify(e.nativeEvent)) + onHeaderMoving={(e) => { + setText("onHeaderMoving" + JSON.stringify(e.nativeEvent)); + }} + onRefresh={() => { + setText("onRefresh"); }} - onRefresh={ - ()=>{ - setText("onRefresh") - } - } HeaderComponent={ - {text} + + {text} + } > item.id.toString()} + style={{ flex: 1, height: "100%", width: "100%" }} + data={data} + renderItem={renderItem} + keyExtractor={(item) => item.id.toString()} /> - +; ``` ## Link @@ -156,7 +159,7 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` -### 在 ArkTs 侧引入 SmartRefresh组件 +### 在 ArkTs 侧引入 SmartRefresh 组件 打开 `entry/src/main/ets/pages/index.ets`，添加： @@ -224,65 +227,63 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 | ` react-native-SmartRefreshLayout` Version | Required React Native Version | Required RNOH Version | Required DevEco Studio Version | Required ROM Version | Required SDK Version | -| ---------------------------------------- | ----------------------------- | --------------------- | ------------------------------ | --------------------- | ----------------------- | -| `0.6.7-0.0.8` | `0.72.5` | `0.72.10` | `4.0.3.700` | `OpenHarmony 4.10.10` | `OpenHarmony 4.0.10.15` | +| ------------------------------------------ | ----------------------------- | --------------------- | ------------------------------ | --------------------- | ----------------------- | +| `0.6.7-0.0.8` | `0.72.5` | `0.72.10` | `4.0.3.700` | `OpenHarmony 4.10.10` | `OpenHarmony 4.0.10.15` | ## 属性 -**组件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 | yes | -| `onReleaseToRefresh` | 可释放刷新时触发 | function | No | Android | yes | -| `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** - -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| -------------- | -------------- | ------ | ---- | ------- | ---- | -| `primaryColor` | 刷新组件Header的主调色 | string | No | Android | 支持 | - -**组件DefaultHeader/ClassicsHeader** +**组件 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 | yes | +| `onReleaseToRefresh` | 可释放刷新时触发 | function | No | Android | yes | +| `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** + +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| -------------- | ------------------------ | ------ | -------- | -------- | -------- | +| `primaryColor` | 刷新组件 Header 的主调色 | string | No | Android | 支持 | + +**组件 DefaultHeader/ClassicsHeader** 当前组件不支持 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| -------------- | -------------- | ------ | ---- | ------- | ---- | -| `primaryColor` | 刷新组件Header的主调色 | string | No | Android | 不支持 | -| `accentColor` | 刷新组件Header的强调色 | string | No | Android | 不支持 | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| -------------- | ------------------------ | ------ | -------- | -------- | -------- | +| `primaryColor` | 刷新组件 Header 的主调色 | string | No | Android | 不支持 | +| `accentColor` | 刷新组件 Header 的强调色 | string | No | Android | 不支持 | -**组件StoreHouseHeader** +**组件 StoreHouseHeader** 当前组件不支持 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ----------- | --------------------- | ------ | ---- | ------- | ---- | -| `text` | StoreHouseHeader的文字 | string | No | Android | 不支持 | -| `textColor` | StoreHouseHeader的文字颜色 | string | No | Android | 不支持 | -| `lineWidth` | StoreHouseHeader的文字线宽 | number | No | Android | 不支持 | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ----------- | --------------------------- | ------ | -------- | -------- | -------- | +| `text` | StoreHouseHeader 的文字 | string | No | Android | 不支持 | +| `textColor` | StoreHouseHeader 的文字颜色 | string | No | Android | 不支持 | +| `lineWidth` | StoreHouseHeader 的文字线宽 | number | No | Android | 不支持 | -**** +--- ## 遗留问题 - - ## 其他 ## 开源协议 -本项目基于 [Apache License 2.0](https://github.com/react-native-studio/react-native-SmartRefreshLayout/blob/0.6.7/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file +本项目基于 [Apache License 2.0](https://github.com/react-native-studio/react-native-SmartRefreshLayout/blob/0.6.7/LICENSE) ，请自由地享受和参与开源。