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, 添加

  mport com.lmy.smartrefreshlayout.SmartRefreshLayoutPackage;
  ..
  Override
  rotected List<ReactPackage> getPackages() {
     	return Arrays.<ReactPackage>asList(
  		...
  		new SmartRefreshLayoutPackage(),
     	);
  
  

  使用

  android:

  

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

  IOS:

  

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

  example

  mport {BounceFlatList} from "react-native-bounce-flatlist";
  onst fakeData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  ..
  ender() {
  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>);
  
  
  

文档

感谢

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