code refactor

Author: wangdicoder

js/components/ListViewFooter.js

@@ -0,0 +1,48 @@
+/**
+ * Created by wangdi on 7/12/16.
+ */
+'use strict';
+
+import React, {Component, PropTypes} from 'react';
+import {Text, View, StyleSheet, ActivityIndicator} from 'react-native';
+import theme from '../constants/theme';
+import px2dp from '../utils/px2dp';
+
+export default class ListViewFooter extends Component{
+    static propTypes = {
+        isRenderFooter: PropTypes.bool,
+        isFullData: PropTypes.bool,
+        indicatorColor: PropTypes.string
+    };
+
+    render(){
+        if(this.props.isRenderFooter) {
+            if (this.props.isFullData)
+                return (
+                    <View style={styles.footer}>
+                        <Text style={{color: this.props.indicatorColor}}>已加载全部</Text>
+                    </View>
+                );
+            else
+                return (
+                    <View style={styles.footer}>
+                        <ActivityIndicator
+                            color={this.props.indicatorColor}
+                        />
+                        <Text style={{marginLeft: 10, color: this.props.indicatorColor}}>拼命获取中...</Text>
+                    </View>
+                );
+        }
+        return null;
+    }
+}
+
+const styles = StyleSheet.create({
+    footer: {
+        flexDirection: 'row',
+        width: theme.screenWidth,
+        height: px2dp(60),
+        alignItems: 'center',
+        justifyContent: 'center',
+    }
+});

js/components/ListViewForGirls.js

@@ -6,6 +6,7 @@ import {StyleSheet, View, Text, Image, ListView, Platform, ActivityIndicator, To
 import {connect} from 'react-redux';
 import theme from '../constants/theme';
 import px2dp from '../utils/px2dp';
+import Footer from './ListViewFooter';
 
 class ListViewForGirls extends Component{
     constructor(props){
@@ -36,23 +37,10 @@ class ListViewForGirls extends Component{
     }
 
     _renderFooter(){
-        if(this.props.isRenderFooter) {
-            if (this.props.isFullData)
-                return (
-                    <View style={styles.footer}>
-                        <Text style={{color: this.props.tabIconColor}}>已加载全部</Text>
-                    </View>
-                );
-            else
-                return (
-                    <View style={styles.footer}>
-                        <ActivityIndicator
-                            color={this.props.tabIconColor}
-                        />
-                        <Text style={{marginLeft: 10, color: this.props.tabIconColor}}>拼命获取中...</Text>
-                    </View>
-                );
-        }
+        const {isRenderFooter, tabIconColor, isFullData} = this.props;
+        return(
+            <Footer indicatorColor={tabIconColor} isFullData={isFullData} isRenderFooter={isRenderFooter}/>
+        );
     }
 
     _renderSeparator(sectionID, rowID, adjacentRowHighlighted){

js/components/ListViewWithInfo.js

@@ -11,6 +11,7 @@ import theme from '../constants/theme';
 import px2dp from '../utils/px2dp';
 import WebViewPage from '../containers/WebViewPage';
 import getCorrectImageSizeUrl from '../utils/imageFactory';
+import Footer from './ListViewFooter';
 
 class ListViewWithInfo extends Component{
     constructor(props){
@@ -42,23 +43,10 @@ class ListViewWithInfo extends Component{
     }
 
     _renderFooter(){
-        if(this.props.isRenderFooter) {
-            if (this.props.isFullData)
-                return (
-                    <View style={styles.footer}>
-                        <Text style={{color: this.props.tabIconColor}}>已加载全部</Text>
-                    </View>
-                );
-            else
-                return (
-                    <View style={styles.footer}>
-                        <ActivityIndicator
-                            color={this.props.tabIconColor}
-                        />
-                        <Text style={{marginLeft: 10, color: this.props.tabIconColor}}>拼命获取中...</Text>
-                    </View>
-                );
-        }
+        const {isRenderFooter, tabIconColor, isFullData} = this.props;
+        return(
+            <Footer indicatorColor={tabIconColor} isFullData={isFullData} isRenderFooter={isRenderFooter}/>
+        );
     }
 
     _renderRow(rowData, sectionID, rowID, highlightRow){

js/containers/DiscoveryTab/GirlsPage.js

@@ -5,7 +5,7 @@
 'use strict';
 
 import React, {Component} from 'react';
-import {StyleSheet, InteractionManager, View, Text, ScrollView, Image, ListView, ActivityIndicator} from 'react-native';
+import {StyleSheet, InteractionManager, View, Button, Text, ScrollView, Image, ListView, ActivityIndicator} from 'react-native';
 import theme from '../../constants/theme';
 import NavigationBar from '../../components/NavigationBar';
 import BackPageComponent from '../../components/BackPageComponent';