文档模板：v0.4.2

react-native-MJRefresh

本项目基于 react-native-MJRefresh 开发。

该第三方库的仓库已迁移至 GitCode，且支持直接从 npm 下载，新的包名为：@react-native-ohos/react-native-mjrefresh 版本所属关系如下：

简介

MJRefresh 是 React Native 的下拉刷新组件库。 提供了 ScrollView、FlatList 等滚动组件的下拉刷新能力，支持自定义刷新头。 通过继承 React Native 框架的 ScrollView 和 FlatList 组件实现，接口与原组件保持一致，开发者可以轻松集成下拉刷新功能。

下载安装

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

npm

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

yarn

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

import React, { Component } from "react";
import { Text, View } from "react-native";
import MJRefresh, { ScrollView } from "react-native-mjrefresh";

interface State {
  text: string,
  refreshing: boolean,
}

export default class MjRefreshDemo extends Component<{}, State> {
  constructor(props: any) {
    super(props);
  }

  state = {
    text: "下拉刷新",
    refreshing: false
  }
  _mjrefresh: any = null;

  render() {
    return (
      <ScrollView
        refreshControl={
          <MJRefresh
            ref={(ref: any) => this._mjrefresh = ref}
            onRefresh={
              () => {
                this.setState({
                  text: '正在刷新'
                })
                setTimeout(() => {
                  this._mjrefresh && this._mjrefresh.finishRefresh();
                }, 1000)
              }
            }
            onRefreshIdle={() => console.log('onRefreshIdle')}
            onReleaseToRefresh={() => {
              this.setState({
                text: '释放刷新'
              })
            }}
            onPulling={(e: any) => {
              if (e.nativeEvent.percent < 0.1) {
                this.setState({
                  text: '下拉刷新'
                })
              }
            }}
          >
            <View style={{
              height: 100, backgroundColor: 'red',
              justifyContent: 'center',
              alignItems: 'center', flexDirection: 'row'
            }}>
              <Text>{this.state.text}</Text>
            </View>
          </MJRefresh>
        }
      >
        <Text>{"mjRefresh TEST mjRefresh TEST mjRefresh TEST mjRefresh TEST mjRefresh TEST"}</Text>
      </ScrollView>
    )
  };
};

Link

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

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

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

"dependencies": {
    "@react-native-ohos/react-native-mjrefresh":"file:../../node_modules/@react-native-ohos/react-native-mjrefresh/harmony/mjrefresh.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/react-native-mjrefresh/src/main/cpp" ./mjrefresh)
# RNOH_END: manual_package_linking_1

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

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

using namespace rnoh;

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

运行

点击右上角的 sync 按钮

或者在命令行终端执行：

cd entry
ohpm install

然后编译、运行即可。

约束与限制

兼容性

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

1. RNOH: 0.82.1; SDK: HarmonyOS 6.0.1 Release SDK; IDE: DevEco Studio 6.0.1 Release; ROM: 6.0.0.120 SP7;
2. RNOH: 0.84.2；SDK：HarmonyOS 6.0.1 Release SDK；IDE：DevEco Studio 26.0.0 Beta1；ROM：6.0.0.120 SP7；

使用示例

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

import React, { Component } from "react";
import { Text, View } from "react-native";
import MJRefresh, { ScrollView } from "react-native-mjrefresh";

interface State {
  text: string,
  refreshing: boolean,
}

export default class MjRefreshDemo extends Component<{}, State> {
  constructor(props: any) {
    super(props);
  }

  state = {
    text: "下拉刷新",
    refreshing: false
  }
  _mjrefresh: any = null;

  render() {
    return (
      <ScrollView
        refreshControl={
          <MJRefresh
            ref={(ref: any) => this._mjrefresh = ref}
            onRefresh={
              () => {
                this.setState({
                  text: '正在刷新'
                })
                setTimeout(() => {
                  this._mjrefresh && this._mjrefresh.finishRefresh();
                }, 1000)
              }
            }
            onRefreshIdle={() => console.log('onRefreshIdle')}
            onReleaseToRefresh={() => {
              this.setState({
                text: '释放刷新'
              })
            }}
            onPulling={(e: any) => {
              if (e.nativeEvent.percent < 0.1) {
                this.setState({
                  text: '下拉刷新'
                })
              }
            }}
          >
            <View style={{
              height: 100, backgroundColor: 'red',
              justifyContent: 'center',
              alignItems: 'center', flexDirection: 'row'
            }}>
              <Text>{this.state.text}</Text>
            </View>
          </MJRefresh>
        }
      >
        <Text>{"mjRefresh TEST mjRefresh TEST mjRefresh TEST mjRefresh TEST mjRefresh TEST"}</Text>
      </ScrollView>
    )
  };
};

接口说明

详情请见react-native-MJRefresh

ScrollView组件：MJRefresh继承RN框架ScrollView实现的滚动组件 无接口变更，跟RN框架ScrollView一致，只是可以接收MJRefresh定义的自定义刷新头并且显示。

FlatList组件：MJRefresh继承RN框架FlatList实现的滚动组件 无接口变更，跟RN框架FlatList一致。

ListView组件：MJRefresh继承RN框架ListView实现的滚动组件 当前类在harmony中不可用。原因是react-native的ListView的废弃于 0.43 版本，官方不再推荐使用。移除于 0.60 版本，代码不再可用。

MJRefresh组件：自定义刷新头组件

Components

Properties

Props

API

遗留问题

无

其他

无

贡献代码

使用过程中发现任何问题都可以提交 Issue，当然，也非常欢迎提交 PR 。

开源协议

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