random data

wangdicoder · wangdicoder · commit 2339f5bc26d2 · 2016-12-06T19:58:15.000+11:00
diff --git a/js/actions/requestRandomData.js b/js/actions/requestRandomData.js
@@ -10,7 +10,7 @@ import fetchWithTimeout from '../utils/fetchWithTimeout';
 function fetchSuccess(json) {
     return {
         type: TYPES.FETCH_RANDOM_DATA_SUCCESS,
-        dataSource: json.results
+        dataSource: json
     };
 }
 
@@ -29,7 +29,7 @@ function fetchRequest() {
 function fetchMoreDataSuccess(json) {
     return {
         type: TYPES.FETCH_RANDOM_MORE_DATA_SUCCESS,
-        dataSource: json.results
+        dataSource: json
     };
 }
 
@@ -45,30 +45,39 @@ function fetchMoreDataFailure() {
     };
 }
 
-export function fetchRandomData() {
-    var url = fetchUrl.random + 'Android/10';
-    return (dispatch) => {
-        dispatch(fetchRequest());
-        fetchWithTimeout(5000, fetch(url))
+export function fetchRandomData(isMoreData=false) {
+    var results = [];
+    const randomCategory = ['Android/1','iOS/1','前端/1','休息视频/1','拓展资源/1','App/1','瞎推荐/1'];
+    var index = 0;
+
+    function fetchCategoryData(dispatch) {
+        fetchWithTimeout(5000, fetch(fetchUrl.random + randomCategory[Math.floor(Math.random()*7)]))
             .then((response)=> response.json())
             .then((json) => {
-                dispatch(fetchSuccess(json));
+                index++;
+                results = results.concat(json.results);
+
+                if(index >= 10) {
+                    if (isMoreData)
+                        dispatch(fetchMoreDataSuccess(results));
+                    else
+                        dispatch(fetchSuccess(results));
+                }else
+                    fetchCategoryData(dispatch);
             }).catch((error) => {
+            if(isMoreData)
+                dispatch(fetchMoreDataFailure());
+            else
                 dispatch(fetchFailure());
-            });
-    };
-}
+        });
+    }
 
-export function fetchMoreRandomData() {
-    var url = fetchUrl.random + 'Android/10';
     return (dispatch) => {
-        dispatch(fetchMoreDataRequest());
-        fetchWithTimeout(5000, fetch(url))
-            .then((response)=> response.json())
-            .then((json) => {
-                dispatch(fetchMoreDataSuccess(json));
-            }).catch((error) => {
-            dispatch(fetchMoreDataFailure());
-        });
-    };
+        if(isMoreData)
+            dispatch(fetchMoreDataRequest());
+        else
+            dispatch(fetchRequest());
+
+        fetchCategoryData(dispatch);
+    }
 }
diff --git a/js/containers/DiscoveryTab/index.js b/js/containers/DiscoveryTab/index.js
@@ -4,7 +4,7 @@
 'use strict';
 
 import React, {Component} from 'react';
-import {StyleSheet, View, Text, ListView, Image, Platform, TouchableNativeFeedback, TouchableOpacity, RefreshControl, ActivityIndicator} from 'react-native';
+import {StyleSheet, View, Text, ListView, Image, Platform, TouchableNativeFeedback, TouchableHighlight, TouchableOpacity, RefreshControl, ActivityIndicator} from 'react-native';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import * as Actions from '../../actions/requestRandomData';
@@ -40,7 +40,7 @@ class DiscoveryFragment extends Component{
 
     _onEndReached(){
         if(!this.props.isRenderFooter && !this.props.loading)
-            this.props.actions.fetchMoreRandomData();
+            this.props.actions.fetchRandomData(true);
     }
 
     render(){
diff --git a/js/containers/MoreTab/GirlsPage.js b/js/containers/MoreTab/GirlsPage.js
@@ -17,11 +17,12 @@ class GirlsPage extends BackPageComponent{
         const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
         this.state = {
             dataSource: ds,
-            dataBlob1: [],
-            dataBlob2: [],
-            imageHeight: 200,
+            dataBlob: [],
+            imageHeight: 20,
+            imageWidth: 20,
+            load: false
         };
-        this.flag = true;
+        this.url = 'http://ww4.sinaimg.cn/large/610dc034gw1fa0ppsw0a7j20u00u0thp.jpg';
     }
 
     render(){
@@ -36,66 +37,59 @@ class GirlsPage extends BackPageComponent{
                         leftBtnPress={this._handleBack.bind(this)}/>
                 </View>
 
-                <View style={{flexDirection: 'row'}}>
+                {this.state.load ?
                     <ListView
-                        ref={(ref)=> this.listView1 = ref}
-                        renderRow={this._renderRow.bind(this)}
                         enableEmptySections={true}
-                        dataSource={this.state.dataSource.cloneWithRows(this.state.dataBlob1)}
-                        onScroll={this._onScroll.bind(this)}
-                        //scrollEventThrottle={200}
-                        onScrollBeginDrag={() => this.flag = true}
-                        showsVerticalScrollIndicator={false}
-                        onEndReached={()=>ToastAndroid.show('end', ToastAndroid.SHORT)}
-                        onEndReachedThreshold={5}
-                    />
-                    <ListView
-                        ref={(ref)=> this.listView2 = ref}
+                        dataSource={this.state.dataSource.cloneWithRows(this.state.dataBlob)}
                         renderRow={this._renderRow.bind(this)}
-                        enableEmptySections={true}
-                        dataSource={this.state.dataSource.cloneWithRows(this.state.dataBlob2)}
-                        onScroll={this._onScroll.bind(this)}
-                        scrollEventThrottle={200}
-                        onScrollBeginDrag={() => this.flag = false}
-                        onEndReached={()=>ToastAndroid.show('end', ToastAndroid.SHORT)}
-                        onEndReachedThreshold={5}
                     />
-                </View>
+                    :
+                    null
+                }
             </View>
         );
     }
 
-    _onScroll(event){
-        var offsetY = event.nativeEvent.contentOffset.y;
-        if(this.flag)
-            this.listView2.scrollTo({y: offsetY, animated: false});
-        else
-            this.listView1.scrollTo({y: offsetY, animated: false});
-    }
-
     _renderRow(rowData) {
         return (
-            <View>
-                <Image style={{width: theme.screenWidth/2, height: this._randomHeight()}}
-                       source={{uri: this._handleImageToSmallSize(rowData.url)}}/>
+            <View style={styles.rowItem}>
+                <Image style={{width: rowData.leftWidth, height: theme.screenWidth/2, marginRight: 3}}
+                       source={{uri: rowData.leftUrl}}/>
+                <Image style={{width: rowData.rightWidth, height: theme.screenWidth/2, marginLeft: 3}}
+                       source={{uri: rowData.rightUrl}}/>
             </View>
         );
     }
 
     componentDidMount(){
         InteractionManager.runAfterInteractions(()=>{
-            fetch('http://gank.io/api/data/%E7%A6%8F%E5%88%A9/20/1').then(response => response.json())
+            fetch('http://gank.io/api/data/%E7%A6%8F%E5%88%A9/10/1').then(response => response.json())
                 .then(json => {
+                    var results = json.results;
+                    var dataBlob = [];
+
+                    for(let i=0; i<results.length; i=i+2) {
+                        const leftWidth = this._randomWidth();
+                        let rowData = {
+                            leftUrl: this._handleImageToSmallSize(results[i].url),
+                            rightUrl: this._handleImageToSmallSize(results[i+1].url),
+                            leftWidth: leftWidth-3-6,
+                            rightWidth: theme.screenWidth - leftWidth - 3 -6
+                        }
+                        dataBlob.push(rowData);
+                    }
+
                     this.setState({
-                        dataBlob1: json.results.slice(0,10),
-                        dataBlob2: json.results.slice(10)
+                        dataBlob: dataBlob,
+                        load: true
                     });
                 });
+
         });
     }
 
-    _randomHeight(){
-        return Math.floor((Math.random() * 100) + 150);
+    _randomWidth(){
+        return Math.floor((Math.random() * theme.screenWidth/5) + theme.screenWidth/5*2);
     }
 
     _handleImageToSmallSize(url){
@@ -109,17 +103,17 @@ const styles = StyleSheet.create({
         paddingTop: theme.toolbar.paddingTop
     },
     toolbar: {
-        position: 'absolute',
-        width: theme.screenWidth,
-        zIndex: 1
-    },
-    img1: {
-        width: theme.screenWidth/2,
-        height: 200
+        // position: 'absolute',
+        // width: theme.screenWidth,
+        // zIndex: 1
     },
-    img2: {
-        width: theme.screenWidth/2,
-        height: 170
+    rowItem: {
+        flexDirection: 'row',
+        width: theme.screenWidth,
+        height: theme.screenWidth/2+6,
+        paddingLeft: 6,
+        paddingRight: 6,
+        paddingBottom: 6
     }
 });
 
diff --git a/js/containers/MoreTab/index.js b/js/containers/MoreTab/index.js
@@ -60,7 +60,7 @@ class MoreFragment extends Component{
                     </View>
                     <View style={[styles.block, {borderTopColor: segmentColor, borderBottomColor: segmentColor}]}>
                         <RowItem title="首页内容展示顺序" icon="md-reorder" iconColor='lightskyblue' onPress={this._itemClickCallback.bind(this, 2)}/>
-                        <RowItem title="主题颜色" icon="md-brush" iconColor={colors.orange} onPress={this._itemClickCallback.bind(this, 3)}/>
+                        <RowItem title="主题颜色" icon="ios-color-palette" iconColor={colors.orange} onPress={this._itemClickCallback.bind(this, 3)}/>
                         {/*<RowItem title="选择语言 / Language" icon="md-globe" iconColor={colors.purple}  onPress={this._itemClickCallback.bind(this, 3)}/>*/}
                         <RowItemWithSwitcher title="夜间模式" icon="md-moon" iconColor="#7b68ee" switcherValue={isOpenNightMode} onValueChange={(value) => actions.changeNightMode(value)}/>
                         <RowItemWithSwitcher title="显示列表缩略图" icon="md-browsers" iconColor='plum' switcherValue={isOpenThumbnail} onValueChange={(value) => actions.changeShowThumbnail(value)} renderSegment={false}/>
diff --git a/js/containers/WebViewPage.js b/js/containers/WebViewPage.js
@@ -54,9 +54,9 @@ class WebViewPage extends BackPageComponent{
                     onRequestClose={this._btnOnPressCallback.bind(this, 9)}>
                     <View style={[styles.moreContentContainerBackground, {backgroundColor: 'rgba(0,0,0,0.1)'}]}>
                         <View style={[styles.moreContentContainer, {backgroundColor: this.props.rowItemBackgroundColor}]}>
-                            {this._renderModalItem(0, 'ios-bowtie-outline', '查看完整标题')}
-                            {this._renderModalItem(4, 'ios-copy-outline', '复制链接')}
-                            {this._renderModalItem(5, 'ios-browsers-outline', '在浏览器中打开')}
+                            {this._renderModalItem(0, 'ios-paper-outline', '查看完整标题')}
+                            {this._renderModalItem(4, 'ios-clipboard-outline', '复制链接')}
+                            {this._renderModalItem(5, 'ios-open-outline', '在浏览器中打开')}
                             {this._renderModalItem(6, 'ios-share-outline', '分享此内容')}
                             {this._renderModalItem(9, 'ios-close-circle-outline', '关闭')}
                         </View>
