模板版本：v0.4.0

pull-to-refresh

本项目基于 pull-to-refresh 开发。

请到三方库的 Releases 发布地址查看配套的版本信息：

1. 安装与使用

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

npm

npm install @react-native-ohos/pull-to-refresh@xxx

yarn

yarn add @react-native-ohos/pull-to-refresh@xxx

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

import React, {useRef, useState} from 'react';
import {PullToRefresh} from '@sdcx/pull-to-refresh';
import {FlatListPage, useDemoFlatlistData} from './FlatListPage';
import {SpinnerPullToRefreshHeader} from '../SpinnerPullToRefreshHeader';
import { Tester, Filter, TestCase, TestSuite } from '@rnoh/testerino';
function PullRefreshFlatList() {
    const [refreshing, setRefreshing] = useState(true);
    const [loadingMore, setLoadingMore] = useState(true);
    const [noMoreData, setNoMoreData] = useState(false);
    const {flatlistData, addFlatlistRefreshItem, addFlatlistLoadMoreItem} = useDemoFlatlistData();
    const pendingAction = useRef<ReturnType<typeof setTimeout> | null>(null);

    const clearPendingAction = () => {
        if (pendingAction.current) {
            clearTimeout(pendingAction.current);
        }
    };

    const beginRefresh = async () => {
        setRefreshing(true);
        pendingAction.current = setTimeout(() => {
            addFlatlistRefreshItem();
            endRefresh();
        }, 2000);
    };

    const endRefresh = () => {
        clearPendingAction();
        setRefreshing(false);
        setNoMoreData(false);
    };

    const loadMore = () => {
        setLoadingMore(true);
        pendingAction.current = setTimeout(() => {
            addFlatlistLoadMoreItem();
            endLoadMore();
        }, 3500);
    };

    const endLoadMore = () => {
        clearPendingAction();
        setLoadingMore(false);
        setNoMoreData(true);
    };

    return (
        <Tester style={{ flex: 1, marginTop: 30 }}>
<PullToRefresh
style={{height: '100%'}}
header={<SpinnerPullToRefreshHeader refreshing={refreshing} onRefresh={
    beginRefresh
} />}
    progressViewOffset={80} // 1.0.0+
    loadingMore={loadingMore}
    noMoreData={noMoreData}
    onLoadMore={loadMore}>
        <FlatListPage data={flatlistData} />
    </PullToRefresh>
    </Tester>
    );
}

export default PullRefreshFlatList;

2. Link

使用AutoLink的工程需要根据该文档配置，Autolink框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md

如您使用的版本支持 Autolink，并且工程已接入 Autolink，可跳过ManualLink配置。

{
  "overrides": {
    "@rnoh/react-native-openharmony": "^0.72.58"
  }
}

"dependencies": {
    "@react-native-ohos/pull-to-refresh": "file:../../node_modules/@react-native-ohos/pull-to-refresh/harmony/pull_to_refresh.har"
  }

cd entry
ohpm install

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

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

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

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

using namespace rnoh;

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

2.4 运行

点击右上角的 sync 按钮

或者在终端执行：

cd entry
ohpm install

然后编译、运行即可。

3. 约束与限制

3.1 兼容性

要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。

在以下版本验证通过：

1. RNOH: 0.72.98; SDK: HarmonyOS-5.0.0(API12); IDE: DevEco Studio 5.0.3.906; ROM: NEXT.0.0.71;
2. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0.47 (API Version 20); IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.107;
3. RNOH: 0.82.22; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.878; ROM: 6.0.0.130;

4. 属性

PullToRefresh属性

PullToRefreshHeader属性

RefreshControl属性

PullToRefreshFooter属性

5. 方法

PullToRefresh方法

PullToRefreshHeader方法

RefreshControl方法

PullToRefreshFooter方法

6. 遗留问题

无

7. 其他

8. 开源协议

本项目基于 The MIT License (MIT)，请自由地享受和参与开源。