girls page finish

Author: wangdicoder

js/components/ListViewForGirls.js

@@ -2,8 +2,9 @@
  * Created by wangdi on 7/12/16.
  */
 import React, {Component, PropTypes} from 'react';
-import {StyleSheet, View, Text, Image, ListView, Platform, ActivityIndicator, TouchableNativeFeedback, TouchableHighlight, ToastAndroid} from 'react-native';
+import {StyleSheet, View, Text, Image, ListView, Platform, ActivityIndicator, TouchableOpacity, Modal} from 'react-native';
 import {connect} from 'react-redux';
+import Icon from 'react-native-vector-icons/Ionicons';
 import theme from '../constants/theme';
 import px2dp from '../utils/px2dp';
 import Footer from './ListViewFooter';
@@ -12,6 +13,13 @@ class ListViewForGirls extends Component{
     constructor(props){
         super(props);
         this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
+        this.state = {
+            modalVisible: false,
+            imageWidth: 0,
+            imageHeight: 0,
+            imageUrl: '',
+            loadedHD: false
+        };
     }
 
     static propTypes = {
@@ -23,16 +31,40 @@ class ListViewForGirls extends Component{
 
     render(){
         return(
-            <ListView
-                dataSource={this.ds.cloneWithRows(this.props.dataSource)}
-                renderRow={this._renderRow.bind(this)}
-                renderFooter={this._renderFooter.bind(this)}
-                renderSeparator={this._renderSeparator.bind(this)}
-                initialListSize={10}
-                pageSize={10}
-                onEndReached={this.props.onEndReached}
-                onEndReachedThreshold={5}
-            />
+            <View>
+                <ListView
+                    dataSource={this.ds.cloneWithRows(this.props.dataSource)}
+                    renderRow={this._renderRow.bind(this)}
+                    renderFooter={this._renderFooter.bind(this)}
+                    renderSeparator={this._renderSeparator.bind(this)}
+                    initialListSize={10}
+                    pageSize={10}
+                    onEndReached={this.props.onEndReached}
+                    onEndReachedThreshold={5}
+                />
+                <Modal
+                    visible={this.state.modalVisible}
+                    onRequestClose={this._triggerModal.bind(this)}
+                    transparent={true}>
+                    <View style={styles.modalBackground}>
+                        <View style={styles.closeBtn}>
+                            <TouchableOpacity
+                                onPress={this._triggerModal.bind(this)}
+                                activeOpacity={theme.touchableOpacityActiveOpacity}>
+                                <Icon name="ios-close-circle-outline" color="#fff" size={px2dp(30)}/>
+                            </TouchableOpacity>
+                        </View>
+                        {this.state.loadedHD ?
+                            <View>
+                                <Image style={{width: this.state.imageWidth, height: this.state.imageHeight}}
+                                       source={{uri: this.state.imageUrl}}/>
+                            </View>
+                            :
+                            <ActivityIndicator size="large"/>
+                        }
+                    </View>
+                </Modal>
+            </View>
         );
     }
 
@@ -51,32 +83,59 @@ class ListViewForGirls extends Component{
 
     _renderRow(rowData, sectionID, rowID, highlightRow){
         return(
-            <TouchableHighlight
+            <View
+                style={styles.rowItem}
                 overflow="hidden"
-                key={rowID}
-                onPress={this._itemOnPress.bind(this, rowData)}
-                underlayColor={theme.touchableHighlightUnderlayColor}>
-                {this._renderRowContent(rowData)}
-            </TouchableHighlight>
+                key={rowID}>
+                {this._renderRowContent(rowData, true)}
+                {this._renderRowContent(rowData, false)}
+            </View>
         );
     }
 
-    _renderRowContent(rowData) {
+    _renderRowContent(rowData, isLeft) {
+        var url = '';
+        if(isLeft) url = rowData.leftUrl;
+        else url = rowData.rightUrl;
         return (
-            <View style={styles.rowItem}>
-                <Image style={{width: theme.screenWidth/2-px2dp(9), height: theme.screenWidth/2, marginRight: 3}}
-                       source={{uri: rowData.leftUrl}}/>
-                <Image style={{width: theme.screenWidth/2-px2dp(9), height: theme.screenWidth/2, marginLeft: 3}}
-                       source={{uri: rowData.rightUrl}}/>
-            </View>
+            <TouchableOpacity
+                onPress={this._itemOnPress.bind(this, rowData, isLeft)}
+                activeOpacity={theme.touchableOpacityActiveOpacity}>
+                <Image style={{width: theme.screenWidth/2-px2dp(9), height: theme.screenWidth/2, marginLeft: px2dp(3), marginRight: px2dp(3)}}
+                       source={{uri: url}}/>
+            </TouchableOpacity>
         );
     }
 
-    _itemOnPress(rowData){
-        // this.props.navigator.push({
-        //     component: WebViewPage,
-        //     args: {rowData: rowData}
-        // });
+    _itemOnPress(rowData, isLeft){
+        this._triggerModal();
+        this.setState({
+            imageUrl: isLeft ? rowData.leftUrl : rowData.rightUrl
+        });
+        this._fetchHDImage(isLeft ? rowData.leftOriginalUrl : rowData.rightOriginalUrl);
+    }
+
+    _triggerModal(){
+        this.setState({modalVisible: !this.state.modalVisible, loadedHD: false});
+    }
+
+    _fetchHDImage(url){
+        var correctWidth = theme.screenWidth;
+        var correctHeight = theme.screenWidth;
+        Image.getSize(url, (width, height)=>{
+            const ratioWidth = theme.screenWidth / width;
+            const ratioHeight = theme.screenHeight / height;
+            if(ratioWidth > ratioHeight){
+                correctWidth = ratioHeight*width;
+                correctHeight = theme.screenHeight;
+            }else{
+                correctWidth = theme.screenWidth;
+                correctHeight = ratioWidth*height;
+            }
+            this.setState({imageUrl: url, imageWidth: correctWidth, imageHeight: correctHeight, loadedHD: true});
+        }, (error)=>{
+            this.setState({imageUrl: url, imageWidth: correctWidth, imageHeight: correctHeight, loadedHD: true});
+        })
     }
 }
 
@@ -85,15 +144,32 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         width: theme.screenWidth,
         height: theme.screenWidth/2,
-        paddingLeft: px2dp(6),
-        paddingRight: px2dp(6)
+        paddingLeft: px2dp(3),
+        paddingRight: px2dp(3)
     },
     footer: {
         flexDirection: 'row',
         width: theme.screenWidth,
         height: px2dp(60),
         alignItems: 'center',
         justifyContent: 'center',
+    },
+    modalBackground: {
+        width: theme.screenWidth,
+        height: theme.screenHeight,
+        backgroundColor: 'rgba(0,0,0,0.9)',
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    closeBtn: {
+        position: 'absolute',
+        top: 0,
+        width: theme.screenWidth,
+        height: px2dp(50),
+        alignItems: 'flex-end',
+        justifyContent: 'flex-start',
+        paddingTop: px2dp(20),
+        paddingRight: px2dp(20)
     }
 });
 

js/containers/DiscoveryTab/GirlsPage.js

@@ -71,12 +71,11 @@ class GirlsPage extends BackPageComponent{
         var dataBlob = [];
 
         for(let i=0; i<dataSource.length; i=i+2) {
-            const leftWidth = this._randomWidth();
             let rowData = {
+                leftOriginalUrl: dataSource[i].url,
+                rightOriginalUrl: dataSource[i+1].url,
                 leftUrl: this._handleImageToSmallSize(dataSource[i].url),
-                rightUrl: this._handleImageToSmallSize(dataSource[i+1].url),
-                leftWidth: leftWidth-3-6,
-                rightWidth: theme.screenWidth - leftWidth - 3 -6
+                rightUrl: this._handleImageToSmallSize(dataSource[i+1].url)
             }
             dataBlob.push(rowData);
         }
@@ -94,10 +93,6 @@ class GirlsPage extends BackPageComponent{
         }
     }
 
-    _randomWidth(){
-        return Math.floor((Math.random() * theme.screenWidth/5) + theme.screenWidth/5*2);
-    }
-
     _handleImageToSmallSize(url){
         return url.replace('large','small');
     }