模板版本：v0.4.0

本库基于 react-native-smartrefreshlayout 开发。

| 三方库名称 | 三方库版本 | 发布信息 | 支持RN版本 | Autolink | 编译API版本 | 社区基线版本 | npm地址 | | ------------ | ------------ | ------------------------------ | ------------- | ------------- |------------------------ | ------------- | ------------- | | @react-native-ohos/react-native-smartrefreshlayout | ~ 0.7.0 | Gitcode Releases | 0.77.* | 否 | API12+ | 0.6.7 | Npm Address |

简介

react-native-smartrefreshlayout 是面向 React Native 生态的第三方原生库，提供下拉刷新的能力，支持多种刷新头的展示。

下载安装

进入到工程目录并输入以下命令：

npm

npm install @react-native-ohos/react-native-smartrefreshlayout

yarn

yarn add @react-native-ohos/react-native-smartrefreshlayout

Link

首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 harmony。

1. Overrides RN SDK

为了让工程依赖同一个版本的 RN SDK，需要在工程根目录的 oh-package.json5 添加 overrides 字段，指向工程需要使用的 RN SDK 版本。替换的版本既可以是一个具体的版本号，也可以是一个模糊版本，还可以是本地存在的 HAR 包或源码目录。

关于该字段的作用请阅读官方说明

{
  "overrides": {
    "@rnoh/react-native-openharmony": "^0.77.18" //  ohpm 在线版本
    // "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // 指向本地 har 包的路径
    // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // 指向源码路径
  }
}

2. 引入原生端代码

目前有两种方法：

• 通过 har 包引入；
• 直接链接源码。

方法一：通过 har 包引入（推荐）

[!TIP] har 包位于三方库安装路径的 harmony 文件夹下。

打开 entry/oh-package.json5，添加以下依赖

"dependencies": {
    "@react-native-ohos/react-native-smartrefreshlayout": "file:../../node_modules/@react-native-ohos/react-native-smartrefreshlayout/harmony/smart_refresh_layout.har"
  }

点击右上角的 sync 按钮

或者在命令行终端执行：

cd entry
ohpm install

方法二：直接链接源码

[!TIP] 如需使用直接链接源码，请参考直接链接源码说明

3. 配置 CMakeLists 和引入 SmartRefreshLayoutPackage

打开 entry/src/main/cpp/CMakeLists.txt，添加：

+ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")

# RNOH_BEGIN: manual_package_linking_1
+ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-smartrefreshlayout/src/main/cpp" ./smart-refresh-layout)
# RNOH_END: manual_package_linking_1

# RNOH_BEGIN: manual_package_linking_2
+ target_link_libraries(rnoh_app PUBLIC rnoh_smart_refresh_layout)
# RNOH_END: manual_package_linking_2

打开 entry/src/main/cpp/PackageProvider.cpp，添加：

#include "RNOH/PackageProvider.h"
#include "generated/RNOHGeneratedPackage.h"
+ #include "SmartRefreshLayoutPackage.h"

using namespace rnoh;

std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
    return {
        std::make_shared<RNOHGeneratedPackage>(ctx),
+       std::make_shared<SmartRefreshLayoutPackage>(ctx)
    };
}

4. 在 ArkTs 侧引入 SmartRefreshPackage

打开 entry/src/main/ets/RNPackagesFactory.ts，添加：

  ...
+ import { SmartRefreshPackage } from '@react-native-ohos/react-native-smartrefreshlayout/ts';

export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [
+   new SmartRefreshPackage(ctx)
  ];
}

运行

点击右上角的 sync 按钮

或者在命令行终端执行：

cd entry
ohpm install

然后编译、运行即可。

约束与限制

兼容性

本文档内容基于以下版本验证通过：

1. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;

使用示例

下面的代码展示了这个库的基本使用场景：

[!WARNING] 使用时 import 的库名不变。

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 [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" },

    // ... more data ...
  ]);

  const onLoadMore = () => {
    // Simulate loading more data
    setTimeout(() => {
      setData([
        ...data,
        { id: data.length + 1, text: `New Item ${data.length + 1}` },
        // ... more loaded data ...
      ]);
    }, 1000);
  };

  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text style={styles.item}>{item.text}</Text>
    </View>
  );
  let smartRefreshControlRef: React.RefObject<SmartRefreshControl>;
  return (
    <View>
      <TouchableOpacity
        onPress={() => {
          smartRefreshControlRef.finishRefresh({ delayed: -1, success: true });
        }}
      >
        <Text style={{ height: 40, width: "100%", backgroundColor: "red" }}>
          finish
        </Text>
      </TouchableOpacity>

      <TouchableOpacity
        onPress={() => {
          setHeaderHeight(headerHeight == 66 ? 132 : 66);
        }}
      >
        <Text style={{ height: 40, width: "100%", backgroundColor: "pink" }}>
          切换高度 66/132
        </Text>
      </TouchableOpacity>

      <TouchableOpacity
        onPress={() => {
          setColor(color === "#fff000" ? "red" : "#fff000");
        }}
      >
        <Text style={{ height: 40, width: "100%", backgroundColor: "green" }}>
          切换颜色（正在刷新中不支持切换背景色）
        </Text>
      </TouchableOpacity>

      <Text style={{ height: 40, width: "100%", backgroundColor: "" }}>
        {text}
      </Text>
      <Text style={{ height: 40, width: "100%", backgroundColor: "" }}>
        {text1}
      </Text>
      <SmartRefreshControl
        ref={(ref) => (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={
          <AnyHeader style = {{ height: 0 }}>
            <Text style={{ height: 66, width: "100%" }}>{text}</Text>
          </AnyHeader>
        }
      >
        <FlatList
          style={{ flex: 1, height: "100%", width: "100%" }}
          bounces={false}
          data={data}
          renderItem={renderItem}
          keyExtractor={(item) => item.id.toString()}
        />
      </SmartRefreshControl>
    </View>
  );
};

const styles = StyleSheet.create({
  item: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: "#ccc",
    width: 100,
    height: 100,
  },
});

export default App;

属性

[!TIP] "Platform"列表示该属性在原三方库上支持的平台。

[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | HeaderComponent | 用于渲染 SmartRefreshLayout 组件的 header,默认为 DefaultHeader。 | Element | No | Android | Yes | | renderHeader | 用于渲染 SmartRefreshLayout 组件的 header,默认为 DefaultHeader。 | Element/func | No | Android | Yes | | enableRefresh | 是否启用下拉刷新,默认为 true | boolean | No | Android | Yes | | headerHeight | 设定 header 的高度 | number | No | Android | Yes | | primaryColor | 设置刷新组件的主调色 | string | No | Android | Yes | | autoRefresh | 是否自动刷新 | object:{refresh:boolean, time:number} | No | Android | Yes | | pureScroll | 是否启用纯滚动 | boolean | No | Android | No | | overScrollBounce | 是否启用越界拖动，类似 IOS 样式。| boolean | No | Android | No | | dragRate | 设置组件下拉高度与手指真实下拉高度的比值,默认为 0.5。 | number | No | Android | Yes | | maxDragRate | 设置最大显示下拉高度与 header 标准高度的比值，默认为 2.0。 | number | No | Android | Yes | | onPullDownToRefresh | 可下拉刷新时触发 | function | No | Android | Yes | | onReleaseToRefresh | 可释放刷新时触发 | function | No | Android | Yes | | onRefresh | 刷新时触发 | function | No | Android | Yes | | onHeaderReleased | Header 释放时触发 | function | No | Android | Yes | | onHeaderMoving | header 移动过程中触发,包括下拉过程和释放过程。 | ({nativeEvent: {percent:number, offset:number, headerHeight:number}})=>void; | No | Android | Yes |

组件 AnyHeader

当前组件支持

| Name | Description | Type | Required | Platform | HarmonyOS Support | | -------------- | ---------------------- | ------ | -------- | -------- | ------------------ | | primaryColor | 刷新组件 Header 的主调色 | string | No | Android | Yes |

组件 DefaultHeader/ClassicsHeader

当前组件支持

| Name | Description | Type | Required | Platform | HarmonyOS Support | | -------------- | ------------------------ | ------ | --------- | -------- | ------------------ | | primaryColor | 刷新组件 Header 的主调色 | string | No | Android | Yes | | accentColor | 刷新组件 Header 的强调色 | string | No | Android | Yes |

组件 StoreHouseHeader

当前组件支持

| Name | Description | Type | Required | Platform | HarmonyOS Support | | ----------- | --------------------------- | ------- | --------- | -------- | ------------------ | | text | StoreHouseHeader 的文字 | string | No | Android | Yes | | textColor | StoreHouseHeader 的文字颜色 | string | No | Android | Yes | | lineWidth | StoreHouseHeader 的文字线宽 | number | No | Android | Yes |

5. 静态方法

[!TIP] "Platform"列表示该属性在原三方库上支持的平台。

[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | finishRefresh | 完成刷新 | function | No | Android | Yes |

6. 遗留问题

• [X] SmartRefreshLayout 包裹 FlatList 组件，多次下拉刷新，item 会回弹：Issue #11
• [ ] SmartRefreshLayout 的StoreHouseHeader刷新头，暂不支持透明度的变化：Issue #45

7. 其他

8. 开源协议

本项目基于 Apache License 2.0 ，请自由地享受和参与开源。