react-native-mjrefresh-ios v0.6.0

功能

1. MJRefresh在RN中的拓展
2. 为RN的ScrollView、FlatList、SectionList等可滑动组件提供新属性来实现下拉刷新, 上拉加载更多
3. 一行代码为WebView组件提供刷新网页功能
4. 提供在RN中实现自定义MJRefresh的header和footer属性

示例截图

iOS配置

1.安装MJRefresh

推荐: 如果项目使用pod来管理iOS第三方依赖库，则在Podfile文件中添加以下代码：

pod 'MJRefresh', '~> 3.4.0'

然后执行： pod install 如果是手动引入MJRefresh，将MJRefresh文件夹引入到项目中，MJRefresh库地址

推荐使用MJRefresh 3.4.0版本以上

2.引入拓展文件

安装库：

yarn add react-native-refresh-ios

或

npm install --save react-native-refresh-ios

或 直接download下载，找到对应文件引入到iOS项目中

通过npm或yarn安装的，需要在项目根目录下的node_modules/react-native-mjrefresh-ios/ios路径下根据需要将对应文件夹引入iOS项目中

在本库中的ios文件夹下有如下文件夹:

MJRefreshExtension          mjRefresh框架的拓展文件
RCTScrollView+MJRefresh     ScrollView,FlatList,SectionList等可滑动组件的拓展文件
RNCWebView+MJRefresh        react-native-webview中的WebView组件拓展文件

根据你需要拓展MJRefresh到对应组件，选择对应文件夹拖入到你的项目中。 注意：MJRefreshExtension文件夹必须拖入 例如： 1. 如果想让ScrollView，FlatList具备MJRefresh刷新能力，那么需要将MJRefreshExtension和RCTScrollView+MJRefresh文件夹引入到iOS项目中 2. 如果想让WebView具备MJRefresh下拉刷新能力，那么需要将MJRefreshExtension和RNCWebView+MJRefresh文件夹引入到iOS项目中 3. 如果想让ScrollView和WebView都具备MJRefresh下拉刷新能力， 则需要将MJRefreshExtension、RCTScrollView+MJRefresh、RNCWebView+MJRefresh文件夹引入到iOS项目中

特别说明：

由于iOS13以后，苹果已经不允许再使用UIWebView了，同时React Native团队也推荐我们使用社区提供的react-native-webview代替React-Native中的WebView。事实上， 在React-Native 0.60以后的版本已经将WebView组件给剥离出去了。本库已经废弃掉对RN提供的WebView组件的支持, 请使用react-native-webview

通过以上两步即可完成配置，接下来即可在RN中愉快的使用MJRefresh了

RN端的使用

下拉刷新

在ScrollView中的使用

这里指包含ScrollView、FlatList、SectionList等可以滑动组件的使用。在这些组件中新增了以下属性用于控制下拉刷新： 1. enableMJRefresh 是否使用MJRefresh下拉刷新功能

2. onMJRefresh 下拉刷新时触发的回调

3. mjRefreshing 是否显示刷新状态 如果为true，则为正在刷新状态，如果为false，则为初始的状态

4. mjHeaderStyle 设置下拉刷新头的样式, 后面会详细介绍

例如：

<FlatList
    // 是否开启下拉刷新
    enableMJRefresh={true}
    // 指定刷新状态
    mjRefreshing={this.state.refreshing}
    // 拖拽刷新时，触发的回调
    onMJRefresh={this.loadDataList}
    // 设置header样式
    mjHeaderStyle={{
        // 指定属性
    }}
/>

使用方法与React Native提供的RefreshControl组件的使用方法完全一致

在WebView中的使用

说明:这里代指react-native-webview提供的WebView

例如：

import { WebView } from 'react-native-webview';

// ....

<WebView
    source={{uri: 'https://www.baidu.com'}}
    // 是否开启下拉刷新
    enableMJRefresh: true,
    // 指定刷新状态
    // mjRefreshing: this.state.refreshing,
    // 下拉刷新触发时，的回调
    // onMJRefresh: this.loadData,
    // mjHeaderStyle: {
    //    // 指定样式属性
    // }
/>

特别说明：

1. 在WebView刷新网页时，如果不设置mjRefreshing、onMJRefresh属性。那么当网页加载完成后，下拉刷新也会结束。如果指定了onMJRefresh属性，那么下拉刷新的结束状态就要开发者通过mjRefreshing自己控制了。
2. 当触发刷新时，WebView的onLoad、onLoadEnd也会被触发
3. WebView组件没有上拉加载更多功能

上拉加载更多

与下拉刷新功能使用的组件范围相同。只要是可以滑动的组件，都可以使用。 通过以下属性来控制上拉加载更多：

1. enableMJLoadMore 是否使用MJRefresh上拉加载更多功能

2. onMJLoadMore 上拉加载更多时触发的回调

3. mjLoadingMore 是否开启上拉加载更多 如果为true，则显示正在加载更多状态，如果为false，则显示初始的状态

4. mjLoadAll 标识是否已经加载结束

5. mjFooterStyle 设置上拉加载更多组件的样式, 后面会详细介绍

例如：

<FlatList
    enableMJLoadMore={this.state.enableLoadMore}
    mjLoadingMore={this.state.loadingMore}
    mjLoadAll={this.state.isLoadAll}
    onMJLoadMore={this.loadMoreData}
    mjFooterStyle={{
        // 设置属性
    }}

/>

自定义样式

针对于下拉刷新, 我们通过指定mjHeaderStyle来设置 针对于上拉加载更多, 我们通过指定mjFooterStyle来设置

mjHeaderStyle

mjHeaderStyle需要指定一个对象，通过这个对象来的属性来设置下拉刷新的样式， 以下是这个对象属性详细介绍

mjHeaderStyle

同理的，mjHeaderStyle需要指定一个对象，通过这个对象来的属性来设置上拉加载更多，以下是这个对象属性详细介绍