README.md

react-native-bounce-flatlist

本插件的FlatList封装基于react-native-ultimate-listview, 弹簧效果实现基于react-native-smartrefreshlayout, 首先对二位开源作者表示感谢.
很大程度上, 我仅仅做了一个解决方案的整合. 希望能对大家有所帮助!

Installation

由于react-native-smartrefreshlayout需要做android端桥接, 安装依赖的时候需要需要对它进行link.

Automatically Installation

• yarn add react-native-bounce-flatlist
• react-native link react-native-smartrefreshlayout

---

Manually Installation (Android Only)

• yarn add react-native-bounce-flatlist

• 打开 android/settings.gradle, 添加

  ...
   include ':react-native-smartrefreshlayout', ':reactNativePicker'
   project(':react-native-smartrefreshlayout').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-smartrefreshlayout/android')
  

• 打开 android/app/build.gradle, 添加

   ...
  dependencies {
   	compile project(':react-native-smartrefreshlayout')
   }
  

• 打开 android/app/your-package-name/MainApplication.java, 添加

   import com.lmy.smartrefreshlayout.SmartRefreshLayoutPackage;
   ...
   @Override
   protected List<ReactPackage> getPackages() {
       	return Arrays.<ReactPackage>asList(
   			...
   			new SmartRefreshLayoutPackage(),
       	);
   }
  

  使用

  android:

  

  下拉可以看到android端的弹性效果

  IOS:

  

   由于在尝试集成react-native-mjrefresh组件的时候出了一些问题, IOS端刷新组件仍然使用的原生RefreshControl, 效果有些差, 不过我已联系作者, 后续会解决
  

  example

   import {BounceFlatList} from "react-native-bounce-flatlist";
   const fakeData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
   ...
   render() {
   	return (
   	<BounceFlatList
       onDataFetch={this._onFetch}
       defaultEmptyDataDes={'没有数据哦~'}
       renderItem={this._renderItem}
       pageSize={20}
   	/>)
   }
  
   _onFetch = (page, start, abort) => {
   	setTimeOut(() => {
   		start(fakeData);
   	}, 2000);
   }
   
   _renderItem = (item, index) => {
   	return (<Text style={{height: 70}}>{我是第`${item}个条目`}</Text>);
   }
  
  

文档

属性名	类型	默认值	描述
onDataFetch	func(page, start, abort)	-	请求数据回调方法. page为当前页码, 从1开始; 请求到数据之后, 调用start方法; 若请求失败, 调用abort方法.
renderItem	func(item, index)	-	条目渲染函数.
pageSize	int	20	为了封装得更彻底, 要求传入每次请求的pageSize
height	int	屏幕高度 - 44	组件整体高度. 给个大概值就行, 主要是为了让LoadingView居中显示, 我暂时没想到更优雅的解决方案.
width	int	屏幕宽度	控件整体宽度. 如果控件的宽度小于屏幕宽度, 请务必指定width, 否则loadingView不会居中显示
onScroll	func(event)	-	滑动监听, 通过event.nativeEvent.contentOffset.y, 可以拿到y方向上的偏移量
renderSeparator	func	-	分割线渲染
showAllLoadViewLimit	func	5	设置showAllLoadViewLimit, 可以指定当服务器数据只有一页时, 数据size超过多少, 才显示 ''没有更多了''
style	any	-	样式
renderHeader	func	-	头布局渲染
customLoadingView	func	-	自定义数据加载时loadingView, 具体如果定义可参考src/view/LoadingView.js
customNetworkView	func(retry)	-	retry: 方法, 调用重新发起请求; 自定义网络错误视图方法
customEmptyDataView	func(retry)	-	retry: 方法, 调用重新发起请求; 自定义空视图回调
customAllLoadedView	func	-	自定义底部提示已全部加载视图
customRefreshingHeader	element	默认样式, DefaultHeader	自定义刷新列表时header的样式, 具体如何定义可以参照 react-native-smartrefreshlayout开发文档
defaultEmptyDataDes	string	"没有数据哦~"	默认空视图下, 文字描述
netWorkErrorMarginTop	int	100	默认网络错误视图中, 图片距离文字的间距. 主要是考虑到有时候列表高度较矮的情况, 视图显示会出现问题

感谢

再次感谢两位开源作者@2534290808和@gameboyVito.
如果这个组件对你有帮助, 请不要吝啬你的start~
由于本人水平有限, 这也是本人正式发布的第一个开源项目, 所以组件在使用中难免有bug或者不尽如人意之处, 届时非常欢迎大家PR!
谢谢!