{"id":26266102,"url":"https://github.com/react-native-studio/react-native-mjrefresh","last_synced_at":"2025-04-09T11:12:58.417Z","repository":{"id":32636706,"uuid":"138533920","full_name":"react-native-studio/react-native-MJRefresh","owner":"react-native-studio","description":"基于ios MJRefresh https://github.com/CoderMJLee/MJRefresh 开发的插件，可提供自定义的弹性刷新","archived":false,"fork":false,"pushed_at":"2022-12-08T18:56:15.000Z","size":17830,"stargazers_count":157,"open_issues_count":44,"forks_count":37,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-02T09:11:12.687Z","etag":null,"topics":["mjrefresh","pull","react","react-native","refresh","refreshcontrol","refreshlayout"],"latest_commit_sha":null,"homepage":"","language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-native-studio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-25T02:26:48.000Z","updated_at":"2024-12-09T11:18:19.000Z","dependencies_parsed_at":"2023-01-14T22:00:17.350Z","dependency_job_id":null,"html_url":"https://github.com/react-native-studio/react-native-MJRefresh","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-studio%2Freact-native-MJRefresh","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-studio%2Freact-native-MJRefresh/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-studio%2Freact-native-MJRefresh/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-studio%2Freact-native-MJRefresh/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-native-studio","download_url":"https://codeload.github.com/react-native-studio/react-native-MJRefresh/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248027411,"owners_count":21035594,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mjrefresh","pull","react","react-native","refresh","refreshcontrol","refreshlayout"],"created_at":"2025-03-14T03:16:50.683Z","updated_at":"2025-04-09T11:12:58.399Z","avatar_url":"https://github.com/react-native-studio.png","language":"Objective-C","readme":"# React Native MJRefresh[![npm version](https://badge.fury.io/js/react-native-mjrefresh.svg)](https://badge.fury.io/js/react-native-mjrefresh)\n\n\u003eReact-Native-MJRefresh可完成使用React Native对IOS进行自定义下拉刷新设置\n\u003e\n\u003eonPulling参数为{nativeEvent:percent},结合lottie-react-native可以获得绝佳的下拉刷新效果\n\u003e\n\u003e自定义详情可见Example:[HuaWeiRefreshControl.js](https://github.com/react-native-studio/react-native-MJRefresh/blob/master/Example/HuaWeiRefreshControl.js)\n\u003e\n\u003eListView使用见：[ListViewExample](https://github.com/react-native-studio/react-native-MJRefresh/blob/master/Example49/ListViewExample.js)\n\u003e\n\u003eFlatList使用见：[FlatListExample](https://github.com/react-native-studio/react-native-MJRefresh/blob/master/Example49/FlatListExample.js)\n\u003e\n\u003eAndroid自定义下拉刷新组件见[React-Native-SmartRefreshLayout](https://github.com/react-native-studio/react-native-SmartRefreshLayout)\n\u003e\n\n## 安装\n### 第一步\n工程目录下运行：\u003cbr\u003e\n ```bash\n npm install --save react-native-mjrefresh (rn\u003e=0.55.0)\n\n npm install --save react-native-mjrefresh-lower (rn\u003c=0.54)\n```\nor(已经安装了yarn)\u003cbr\u003e\n```bash\n yarn add react-native-mjrefresh (rn\u003e=0.55)\n\n yarn add react-native-mjrefresh-lower (rn\u003c=0.54)\n```\n\n\u003e\u003e Notice\n\n| react-native | react-native-mjrefresh |\n|------------------|--------------|\n|\u003c0.55             |使用react-native-mjrefresh-lower|\n| \u003e=0.55           | *     |\n| \u003e=0.58           | 0.7.0    |\n\n### 第二步\n\n#### 使用link添加：\n工程目录下运行:\n ```bash\n react-native link react-native-mjrefresh （rn\u003e=0.55)\n\n react-native link react-native-mjrefresh-lower（rn\u003c=0.54）\n ```\n\n#### 使用CocoaPods添加:\npodfile添加：\n```bash\n  pod 'RCTMJRefreshHeader', :path =\u003e '../node_modules/react-native-mjrefresh'\n```\n\n执行：\n```bash\n  pod install\n```\n\n### 第三部使用\n\n在工程中导入：\n```javascript\nimport MJRefresh,{ScrollView} from 'react-native-mjrefresh'//rn\u003e=0.55\n//import MJRefresh,{ScrollView} from 'react-native-mjrefresh-lower'//rn\u003c=0.54\n\n//该ScrollView兼容官方所有的属性和方法，refreshControl也可以使用官方的RefreshControl\n  state={\n        text:'下拉刷新'\n    }\n  render() {\n    return (\n        \u003cScrollView\n            refreshControl={\n              \u003cMJRefresh\n                  ref={ref=\u003ethis._mjrefresh = ref}\n                  onRefresh={\n                  ()=\u003e{\n                      this.setState({\n                          text:'正在刷新'\n                      })\n                      console.log('onRefresh')\n                      setTimeout(()=\u003e{\n                          this._mjrefresh \u0026\u0026 this._mjrefresh.finishRefresh();\n                      },1000)\n                  }\n                  }\n                  onRefreshIdle={()=\u003econsole.log('onRefreshIdle')}\n                  onReleaseToRefresh={()=\u003e{\n                      this.setState({\n                          text:'释放刷新'\n                      })\n                  }}\n                  onPulling={e=\u003e{\n                      if(e.nativeEvent.percent\u003c0.1){\n                          this.setState({\n                              text:'下拉刷新'\n                          })\n                      }\n                  }}\n              \u003e\n                \u003cView style={{height:100,backgroundColor:'red',\n                    justifyContent:'center',\n                    alignItems:'center',flexDirection:'row'\n                }}\u003e\n                  \u003cText\u003e{this.state.text}\u003c/Text\u003e\n                \u003c/View\u003e\n              \u003c/MJRefresh\u003e\n            }\n        \u003e\n          \u003cView style={{flex:1,height:1000,backgroundColor:'#ddd'}}\u003e\n          \u003c/View\u003e\n        \u003c/ScrollView\u003e\n    );\n  }\n```\n## MJRefresh\n\n#### 查看属性\n\n- [`onRefresh`](README.md#onrefresh)\n- [`onRefreshIdle`](README.md#onrefreshidle)\n- [`onReleaseToRefresh`](README.md#onreleasetorefresh)\n- [`onPulling`](README.md#onpulling)\n\n#### 查看方法\n\n- [`beginRefresh`](README.md#beginrefresh)\n- [`finishRefresh`](README.md#finishrefresh)\n\n\n\n# 文档\n\n## Props\n\n### `onReleaseToRefresh`\n\n可释放刷新时触发\n\n| Type | Required |\n| ---- | -------- |\n| function | No       |\n\n---\n\n### `onRefresh`\n\n刷新时触发\n\n| Type | Required |\n| ---- | -------- |\n| function | No       |\n\n---\n\n### `onRefreshIdle`\n\n刷新闲置时触发\n\n| Type | Required |\n| ---- | -------- |\n| function | No       |\n\n---\n\n#### `onPulling`\n\n```javascript\n   ({nativeEvent: {percent:number}})=\u003evoid;\n```\nheader下拉过程中触发\n\n| Type | Required |\n| ---- | -------- |\n| function | No       |\n\n## Methods\n\n### `beginRefresh`\n\n```javascript\n   beginRefresh();\n```\n\n开始刷新\n\n---\n\n### `finishRefresh`\n\n```javascript\n   finishRefresh();\n```\n\n结束刷新\n\n\n## 示例\n\u003cdiv align=center\u003e\n\u003cimg src=\"https://github.com/react-native-studio/react-native-MJRefresh/blob/master/screen_shot.gif\" width = \"300\"  alt=\"图片名称\" align=center /\u003e\n\u003cimg src=\"https://github.com/react-native-studio/react-native-MJRefresh/blob/master/1530090339829.gif\" width = \"300\"  alt=\"图片名称\" align=center /\u003e\n  \u003c/div\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-native-studio%2Freact-native-mjrefresh","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-native-studio%2Freact-native-mjrefresh","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-native-studio%2Freact-native-mjrefresh/lists"}