调整坐标 review by zhanglixia

@@ -5,6 +5,8 @@ import ReactNative from 'react-native';
 
 const {
     Image,
+    View,
+    Text,
     StyleSheet,
     Dimensions,
     TouchableOpacity,
@@ -17,7 +19,7 @@ export default class ShopTopBanner extends React.Component {
 
         this.state = {
             backgroundWidth: Dimensions.get('window').width,
-            backgroundHeight:  Math.ceil((310 / 640) * Dimensions.get('window').width),
+            backgroundHeight: 100,
             buttonWidth: 64,
             buttonHeight: 25,
             isCollection: false,
@@ -33,30 +35,49 @@ export default class ShopTopBanner extends React.Component {
         if (backgroundImage === '') {
             return null;
         }
-        let icon = require('../../../../image/btn_gz_p.png');
+        let icon = info.shop_logo.replace('{width}', 100).replace('{height}', 100);     // 商品缩略图
+        let name = info.shop_name;
+        let buttonIcon = require('../../../../image/btn_gz_p.png');
         if (this.state.isCollection) {
-            icon = require('../../../../image/btn_gz_n.png');
+            buttonIcon = require('../../../../image/btn_gz_n.png');
         }
         return (
-            <Image
-                source={{uri: backgroundImage}}
-                style={{width: this.state.backgroundWidth, height: this.state.backgroundHeight }}
-                resizeMode={'cover'}
-            >
-                <TouchableOpacity onPress={this.props.onPressCollection} >
-                    <Image
-                        source={icon}
-                        style={{ width: this.state.buttonWidth, height: this.state.buttonHeight,position:'absolute',borderRadius: 5,bottom:-this.state.backgroundHeight + 30,right:30}}
-                        resizeMode={'cover'}/>
-                </TouchableOpacity>
-            </Image>
+            <View style={{width: this.state.backgroundWidth, height:this.state.backgroundHeight}}>
+
+                <Image
+                    source={{uri: backgroundImage}}
+                    style={{width: this.state.backgroundWidth, height: this.state.backgroundHeight }}
+                    resizeMode={'cover'}
+                >
+                    <TouchableOpacity onPress={this.props.onPressCollection} >
+                        <Image
+                            source={buttonIcon}
+                            style={{ width: this.state.buttonWidth, height: this.state.buttonHeight,position:'absolute',borderRadius: 5,bottom:-this.state.backgroundHeight + 15,right:15}}
+                            resizeMode={'cover'}/>
+                    </TouchableOpacity>
+
+                    <View style={{width: 50, height:50, backgroundColor:'white',bottom: -this.state.backgroundHeight + 15 + 50,marginLeft:15}}>
+                        <Image
+                            source={{uri: icon}}
+                            style={{ width: 50, height: 50}}
+                            resizeMode={'contain'}/>
+                    </View>
+                    <View style={{width: 100, height:18, bottom: -this.state.backgroundHeight + 15 + 68,marginLeft:74,backgroundColor:'transparent'}}>
+                        <Text style={styles.text}>{name}</Text>
+                    </View>
+                </Image>
+            </View>
         );
     }
 };
 
+let {width, height} = Dimensions.get('window');
+
 const styles = StyleSheet.create({
-    thumbnail: {
-        width: 320,
-        height: 120,
+    text: {
+        fontWeight: 'bold',
+		textAlign: 'left',
+		color: 'white',
+		fontSize: 14,
     },
 });