React Native MJRefreshnpm version

安装

第一步

npm install --save react-native-mjrefresh (rn>=0.55.0)
npm install --save react-native-mjrefresh-lower (rn<=0.54)

 yarn add react-native-mjrefresh (rn>=0.55)
 yarn add react-native-mjrefresh-lower (rn<=0.54)

第二步

使用link添加:

react-native link react-native-mjrefresh (rn>=0.55)
react-native link react-native-mjrefresh-lower(rn<=0.54)

使用CocoaPods添加:

 pod 'RCTMJRefreshHeader', :path => '../node_modules/react-native-mjrefresh'

 pod install

第三部使用

import MJRefresh,{ScrollView} from 'react-native-mjrefresh'//rn>=0.55
//import MJRefresh,{ScrollView} from 'react-native-mjrefresh-lower'//rn<=0.54
//该ScrollView兼容官方所有的属性和方法,refreshControl也可以使用官方的RefreshControl
 state={
 text:'下拉刷新'
 }
 render() {
 return (
 <ScrollView
 refreshControl={
 <MJRefresh
 ref={ref=>this._mjrefresh = ref}
 onRefresh={
 ()=>{
 this.setState({
 text:'正在刷新'
 })
 console.log('onRefresh')
 setTimeout(()=>{
 this._mjrefresh && this._mjrefresh.finishRefresh();
 },1000)
 }
 }
 onRefreshIdle={()=>console.log('onRefreshIdle')}
 onReleaseToRefresh={()=>{
 this.setState({
 text:'释放刷新'
 })
 }}
 onPulling={e=>{
 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>
 }
 >
 <View style={{flex:1,height:1000,backgroundColor:'#ddd'}}>
 </View>
 </ScrollView>
 );
 }

MJRefresh

查看属性

查看方法

文档

Props

onReleaseToRefresh

onRefresh

onRefreshIdle

onPulling

 ({nativeEvent: {percent:number}})=>void;

Methods

beginRefresh

 beginRefresh();

finishRefresh

 finishRefresh();

示例