1. 更新瀑布流的代码，使用largeList提供的组件

2. 更新teaset库版本

Author: CodeXYu

android/app/build.gradle

@@ -75,7 +75,7 @@ import com.android.build.OutputFile
  */
 
 project.ext.react = [
-    entryFile: "index.js"
+    entryFile: "index_old.js"
 ]
 
 apply from: "../../node_modules/react-native/react.gradle"
@@ -175,6 +175,7 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-spring-scrollview')
     compile project(':rn-fetch-blob')
     compile project(':react-native-vector-icons')
     compile project(':react-native-splash-screen')

android/app/src/main/java/com/shitu/MainApplication.java

@@ -5,6 +5,7 @@
 import android.support.multidex.MultiDex;
 
 import com.facebook.react.ReactApplication;
+import com.bolan9999.SpringScrollViewPackage;
 import com.RNFetchBlob.RNFetchBlobPackage;
 import com.oblador.vectoricons.VectorIconsPackage;
 import org.devio.rn.splashscreen.SplashScreenReactPackage;
@@ -33,6 +34,7 @@ public boolean getUseDeveloperSupport() {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+            new SpringScrollViewPackage(),
             new RNFetchBlobPackage(),
             new VectorIconsPackage(),
             new SplashScreenReactPackage(),

android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'ShiTu'
+include ':react-native-spring-scrollview'
+project(':react-native-spring-scrollview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-spring-scrollview/android')
 include ':rn-fetch-blob'
 project(':rn-fetch-blob').projectDir = new File(rootProject.projectDir, '../node_modules/rn-fetch-blob/android')
 include ':react-native-vector-icons'

app/mobx/News/WelfareMobx.js

@@ -5,15 +5,15 @@
 
 import { observable, action, runInAction } from 'mobx';
 import type { RTGankResult, RTWeal } from '../../servers/News/interfaces';
-import { loadWelfareData } from '../../servers/News';
+import { fetchWelfareData } from '../../servers/News';
 import { System } from '../../utils';
 import FetchBlob from 'rn-fetch-blob';
 import { CameraRoll } from 'react-native';
+import { ConfigStore } from '../../store/ConfigStore';
 const Dirs = FetchBlob.fs.dirs;
+type loadDataType = 'refreshing' | 'load more' | string;
 
-let loadMoreNumber = [];
-
-class WelfareMobx {
+class WelfareMobx extends ConfigStore {
   @observable
   isRefreshing: boolean = true;
   @observable
@@ -56,84 +56,52 @@ class WelfareMobx {
   };
 
   @action.bound
-  async fetchWelfareData(page: number) {
+  async loadWelfareData(type: loadDataType = 'refreshing') {
+    this.page = type === 'refreshing' ? 1 : this.page + 1;
+
     try {
-      const data = await loadWelfareData(page);
+      const data = await fetchWelfareData(this.page);
 
       const results = data.results;
 
       const defaultHeights = [277, 216, 211, 206, 287, 214];
 
       results.map((item: RTWeal) => {
         const imageWidth = System.SCREEN_WIDTH / 2 - 15;
-        // let imageHeight = imageWidth * 1.15;
-        // imageHeight = parseInt(Math.random() * 100 + imageHeight);
-        // item.height = imageHeight;
-
         const id = item._id;
-
         const hexId = parseInt(id.substring(id.length - 2), 16);
         item.height = defaultHeights[hexId % 6];
-
         item.width = imageWidth;
-
         item.largeUrl = item.url;
         item.url = WelfareMobx.handleImageToSmallSize(item.url);
       });
 
-      if (page !== 1) {
-        // console.log('page不等于1', page);
+      if (type === 'load more') {
         runInAction(() => {
-          this.page = page;
           this.dataSource = this.dataSource.concat(results);
         });
       } else {
         runInAction(() => {
           this.page = 1;
           this.dataSource = results;
         });
-
-        // console.log('page等于1', page);
       }
-
-      runInAction(() => {
-        this.isRefreshing = false;
-      });
+      // console.log('page', this.page);
+      // console.log('isRefreshing', this.isRefreshing);
     } catch (e) {
+      this.showToast(e);
+      console.log(e);
+    } finally {
       runInAction(() => {
         this.isRefreshing = false;
       });
-      console.log(e);
     }
   }
 
   static handleImageToSmallSize(url: string) {
     // thumbnail|缩略，quare|方形缩略图, thumb180, wap360, small|小图, bmiddle|中图，mw600|600, wap720, mw720|720, mw1024|1024, large|原图。
-
     return url.replace('large', 'wap360');
   }
-
-  @action.bound
-  async refreshData() {
-    runInAction(() => {
-      this.isRefreshing = true;
-    });
-    await this.fetchWelfareData(1);
-  }
-
-  @action.bound
-  async loadMoreData(distanceFromEnd: Array<number>) {
-    if (loadMoreNumber.length === 2) loadMoreNumber = [];
-
-    loadMoreNumber.push(distanceFromEnd);
-
-    let page = this.page;
-
-    if (loadMoreNumber.length === 2) {
-      page += 1;
-      await this.fetchWelfareData(page);
-    }
-  }
 }
 
 export { WelfareMobx };

app/pages/News/Welfare/index.js

@@ -1,42 +1,37 @@
 /**
  * @flow
- * Created by Rabbit on 2018/5/4.
+ * Created by Rabbit on 2019-02-25.
  */
-
 import React from 'react';
-import { StyleSheet, Text, View, Image, ActivityIndicator, Modal, TouchableWithoutFeedback } from 'react-native';
-import { MasonryList } from '../../../components';
-import BaseContainer from '../../../components/BaseContainer';
+import { StyleSheet } from 'react-native';
+import { WaterfallList } from 'react-native-largelist-v3';
+import { NormalFooter } from 'react-native-spring-scrollview/NormalFooter';
 
 import { WelfareMobx } from '../../../mobx/News';
-
-import { observer } from 'mobx-react';
+import { inject, observer } from 'mobx-react';
+import type { RTWeal } from '../../../servers/News/interfaces';
 import { Button, CustomImage } from '../../../components';
-import type { NavigationState } from 'react-navigation';
-import { RTWeal } from '../../../servers/News/interfaces';
 import { System } from '../../../utils';
 import { ActionSheet, Overlay } from 'teaset';
-import { inject } from 'mobx-react';
+import type { NavigationState } from 'react-navigation';
 import { PowerStore } from '../../../store/PowerStore';
+import { ConfigStore } from '../../../store/ConfigStore';
 
 type Props = {
   navigate: NavigationState,
-  powerStore: PowerStore
+  powerStore: PowerStore,
+  configStore: ConfigStore
 };
-
-@inject('powerStore')
+@inject('powerStore', 'configStore')
 @observer
 class Welfare extends React.Component<Props> {
-  welfareMobx: WelfareMobx;
-  customPopView: any;
-
-  constructor(props: Props) {
+  constructor(props) {
     super(props);
     this.welfareMobx = new WelfareMobx();
   }
 
   async componentDidMount(): void {
-    await this.welfareMobx.fetchWelfareData(1);
+    await this.welfareMobx.loadWelfareData('refreshing');
   }
 
   actionSheetToSaveImage = (item: RTWeal) => {
@@ -52,7 +47,7 @@ class Welfare extends React.Component<Props> {
         title: '设置主屏幕',
         type: 'default',
         onPress: async () => {
-          // alert('设置成功');
+          this.props.configStore.showToast('设置成功');
           await this.props.powerStore.setShiTuBackgroundImage(item.url);
         }
       }
@@ -66,7 +61,7 @@ class Welfare extends React.Component<Props> {
       <Overlay.PopView
         style={{ alignItems: 'center', justifyContent: 'center' }}
         overlayOpacity={1}
-        type="zoomIn"
+        type="zoomOut"
         ref={v => (this.customPopView = v)}
       >
         <Button
@@ -88,70 +83,47 @@ class Welfare extends React.Component<Props> {
     Overlay.show(overlayView);
   }
 
-  renderItem = ({ item }: { item: RTWeal, index: number, column: number }) => {
+  renderItem = (item: RTWeal) => {
     return (
-      <Button onPress={() => this.showPopCustom(item)}>
-        <CustomImage
-          source={{ uri: item.url }}
-          style={[styles.cell, { height: item.height, backgroundColor: 'white' }]}
-        />
+      <Button onPress={() => this.showPopCustom(item)} style={{ flex: 1 }}>
+        <CustomImage source={{ uri: item.url }} style={[styles.cell]} />
       </Button>
     );
   };
 
-  renderFooterComponent = () => {
-    const { isRefreshing } = this.welfareMobx;
-    return (
-      !isRefreshing && (
-        <View
-          style={{
-            height: 50,
-            flex: 1,
-            alignItems: 'center',
-            justifyContent: 'center'
-          }}
-        >
-          <ActivityIndicator size={'small'} />
-        </View>
-      )
-    );
-  };
-
   render() {
-    const { dataSource, isRefreshing, refreshData, loadMoreData } = this.welfareMobx;
-
+    const { dataSource, isRefreshing, loadWelfareData } = this.welfareMobx;
     return (
-      <BaseContainer key={'base'} isHiddenNavBar={true} isTopNavigator={true} store={this.welfareMobx}>
-        <MasonryList
-          onRefresh={refreshData}
-          style={{ backgroundColor: 'white' }}
-          refreshing={isRefreshing}
-          data={dataSource.slice()}
-          renderItem={this.renderItem}
-          getHeightForItem={({ item }) => item.height + 2}
-          numColumns={2}
-          initialNumToRender={10}
-          keyExtractor={item => item._id}
-          ListEmptyComponent={() => <View />}
-          ListHeaderComponent={() => <View />}
-          ListFooterComponent={this.renderFooterComponent}
-          onEndReachedThreshold={0.1}
-          onEndReached={loadMoreData}
-        />
-      </BaseContainer>
+      <WaterfallList
+        ref={ref => (this._scrollView = ref)}
+        data={dataSource}
+        style={styles.container}
+        heightForItem={item => item.height + 10}
+        preferColumnWidth={SCREEN_WIDTH / 2 - 10}
+        renderItem={this.renderItem}
+        onRefresh={() => {
+          loadWelfareData('refreshing');
+          !isRefreshing && this._scrollView.endRefresh(); // 报错
+        }}
+        onLoading={async () => {
+          loadWelfareData('load more');
+          this._scrollView.endLoading();
+        }}
+        // loadingFooter={NormalFooter}
+      />
     );
   }
 }
 
+export { Welfare };
+
 const styles = StyleSheet.create({
   container: {
-    flex: 1
+    paddingHorizontal: 3
   },
   cell: {
-    margin: 1,
-    alignItems: 'center',
-    justifyContent: 'center'
+    flex: 1,
+    margin: 5,
+    backgroundColor: 'white'
   }
 });
-
-export { Welfare };