React-Native-MJRefresh可完成使用React Native对IOS进行自定义下拉刷新设置
onPulling参数为{nativeEvent:percent},结合lottie-react-native可以获得绝佳的下拉刷新效果
自定义详情可见Example:HuaWeiRefreshControl.js
ListView使用见:ListViewExample
FlatList使用见:FlatListExample
Android自定义下拉刷新组件见React-Native-SmartRefreshLayout
安装
第一步
工程目录下运行:
npm install --save react-native-mjrefresh npm install --save react-native-mjrefresh-lower
or(已经安装了yarn)
yarn add react-native-mjrefresh yarn add react-native-mjrefresh-lower
第二步
使用link添加:
工程目录下运行:
react-native link react-native-mjrefresh (rn>=0.55) react-native link react-native-mjrefresh-lower(rn<=0.54)
使用CocoaPods添加:
podfile添加:
pod 'RCTMJRefreshHeader', :path => '../node_modules/react-native-mjrefresh'
执行:
pod install
第三部使用
在工程中导入:
//import MJRefresh,{ScrollView} from 'react-native-mjrefresh-lower'//rn<=0.54 //该ScrollView兼容官方所有的属性和方法,refreshControl也可以使用官方的RefreshControl state= text:'下拉刷新' { return <ScrollView refreshControl= <MJRefresh ref=this_mjrefresh = ref onRefresh= { this console } onRefreshIdle=console onReleaseToRefresh={ this } onPulling={ ifenativeEventpercent<01 this } > <View style=height:100backgroundColor:'red' justifyContent:'center' alignItems:'center'flexDirection:'row' > <Text>thisstatetext</Text> </View> </MJRefresh> > <View style=flex:1height:1000backgroundColor:'#ddd'> </View> </ScrollView> ; }
MJRefresh
查看属性
查看方法
文档
Props
onReleaseToRefresh
可释放刷新时触发
Type | Required |
---|---|
function | No |
onRefresh
刷新时触发
Type | Required |
---|---|
function | No |
onRefreshIdle
刷新闲置时触发
Type | Required |
---|---|
function | No |
onPulling
void;
header下拉过程中触发
Type | Required |
---|---|
function | No |
Methods
beginRefresh
;
开始刷新
finishRefresh
;
结束刷新
示例

