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 (rn>=0.55.0) npm install --save react-native-mjrefresh-lower (rn<=0.54)or(已经安装了yarn)
yarn add react-native-mjrefresh (rn>=0.55) yarn add react-native-mjrefresh-lower (rn<=0.54)Notice
| react-native | react-native-mjrefresh |
|---|---|
| <0.55 | 使用react-native-mjrefresh-lower |
| >=0.55 | * |
| >=0.58 | 0.7.0 |
工程目录下运行:
react-native link react-native-mjrefresh （rn>=0.55) react-native link react-native-mjrefresh-lower（rn<=0.54）podfile添加：
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> ); }可释放刷新时触发
| Type | Required |
|---|---|
| function | No |
刷新时触发
| Type | Required |
|---|---|
| function | No |
刷新闲置时触发
| Type | Required |
|---|---|
| function | No |
({nativeEvent: {percent:number}})=>void;header下拉过程中触发
| Type | Required |
|---|---|
| function | No |
beginRefresh();开始刷新
finishRefresh();结束刷新
