From 525e545f288fdcea9a41eff4e5f28c69cb6c17af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=97=E5=98=89=E8=AF=9A?= <425765923@qq.com> Date: Tue, 28 Nov 2023 11:18:06 +0800 Subject: [PATCH] =?UTF-8?q?[Issues:=20#I8JVPN]=20=E6=96=B0=E5=A2=9Ereact-n?= =?UTF-8?q?ative-SmartRefreshLayout=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-SmartRefreshLayout.md | 288 +++++++++++++++++++++++ 1 file changed, 288 insertions(+) create mode 100644 zh-cn/react-native-SmartRefreshLayout.md diff --git a/zh-cn/react-native-SmartRefreshLayout.md b/zh-cn/react-native-SmartRefreshLayout.md new file mode 100644 index 00000000..e5f04ad5 --- /dev/null +++ b/zh-cn/react-native-SmartRefreshLayout.md @@ -0,0 +1,288 @@ +

+

react-native-SmartRefreshLayout

+

+

+ + + Supported platforms + + + License + +

+ +## 安装与使用 + +进入到工程目录并输入以下命令： + +```bash +yarn add xxx +``` + +或者 + +```bash +npm install xxx +``` + +下面的代码展示了这个库的基本使用场景： + +```js +import { SmartRefreshControl,AnyHeader} from 'react-native-smartrefreshlayout'; + +smartRefreshControlRef=ref} + primaryColor='#f3f3f3' + headerHeight={66} + style={{ height:500,width:'100%',backgroundColor:"#ffcc00"}} + enableRefresh + enableLoadMore + onHeaderMoving={(e)=>{ + setText('onHeaderMoving' + JSON.stringify(e.nativeEvent)) + }} + onRefresh={ + ()=>{ + setText("onRefresh") + } + } + HeaderComponent={ + {text} + } +> + item.id.toString()} + /> + +``` + +## Link + +目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` + +### 引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入 +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "rnoh": "file:../rnoh", + "rnoh-smart-refresh-layout": "file:../../node_modules/react-native-smartrefreshlayout/harmony/smart_refresh_layout.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "rnoh": "file:../rnoh", + "rnoh-smart-refresh-layout": "file:../../node_modules/react-native-smartrefreshlayout/harmony/smart_refresh_layout" + } +``` + +打开终端，执行： + +```bash +cd entry +ohpm install --no-link +``` + +### 配置 CMakeLists 和引入 SmartRefreshLayoutPackage + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") +set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: add_package_subdirectories +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++ add_subdirectory("${OH_MODULE_DIR}/rnoh-smart-refresh-layout/src/main/cpp" ./smart-refresh-layout) +# RNOH_END: add_package_subdirectories + +add_library(rnoh_app SHARED + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) + +target_link_libraries(rnoh_app PUBLIC rnoh) + +# RNOH_BEGIN: link_packages +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ++ target_link_libraries(rnoh_app PUBLIC rnoh_smart_refresh_layout) +# RNOH_END: link_packages +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "SamplePackage.h" ++ #include "SmartRefreshLayoutPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 在 ArkTs 侧引入 SmartRefresh组件 + +打开 `entry/src/main/ets/pages/index.ets`，添加： + +```diff +import { + RNApp, + ComponentBuilderContext, + RNAbility, + AnyJSBundleProvider, + MetroJSBundleProvider, + ResourceJSBundleProvider, +} from 'rnoh' +import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package" +import { createRNPackages } from '../RNPackagesFactory' ++ import { SmartRefreshControl,SMART_REFRESH_CONTROL_TYPE ,ANY_HEADER_TYPE,RNCAnyHeader,DEFAULT_HEADER_TYPE,RNCDefaultHeader} from "rnoh-smart-refresh-layout" + +@Builder +function CustomComponentBuilder(ctx: ComponentBuilderContext) { + if (ctx.componentName === SAMPLE_VIEW_TYPE) { + SampleView({ + ctx: ctx.rnohContext, + tag: ctx.descriptor.tag, + buildCustomComponent: CustomComponentBuilder + }) + } ++ else if (ctx.descriptor.type == SMART_REFRESH_CONTROL_TYPE){ ++ SmartRefreshControl({ ++ ctx: ctx.rnohContext, ++ tag: ctx.descriptor.tag, ++ buildCustomComponent: CustomComponentBuilder ++ }) ++ } else if (ctx.descriptor.type == ANY_HEADER_TYPE){ ++ RNCAnyHeader({ ++ ctx: ctx.rnohContext, ++ tag: ctx.descriptor.tag, ++ buildCustomComponent: CustomComponentBuilder ++ }) ++ } else if (ctx.descriptor.type == DEFAULT_HEADER_TYPE) { ++ RNCDefaultHeader({ ++ ctx: ctx.rnohContext, ++ tag: ctx.descriptor.tag, ++ buildCustomComponent: CustomComponentBuilder ++ }) ++ } + ... +} +... +``` + +### 运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +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` | + +## 属性 + +**组件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 | 不支持 | + +**组件StoreHouseHeader** + +当前组件不支持 + +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ----------- | --------------------- | ------ | ---- | ------- | ---- | +| `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 -- Gitee