新人专享楼层 review by 陈林

@@ -5,38 +5,195 @@
  * Version: 1.0
  * Created on 2017/2/9.
  */
- import React,{Component} from 'react';
- import ReactNative,{
-   Image,
-   Text,
-   StyleSheet,
-   ListView,
-   View,
-   TouchableOpacity,
- } from 'react-native';
- import Swiper from 'react-native-swiper';
- import ImmutablePropTypes from 'react-immutable-proptypes';
- import SlicedImage from '../../../common/components/SlicedImage';
- import HeadTitleCell from '../cell/HeadTitleCell';
- import Banner from '../../../common/components/Banner'
-
- export default class NewUserFloor extends Component{
-   constructor(props){
-     super(props);
-   }
-
-   render(){
-     return(
-       <View style={styles.container}>
-        <HeadTitleCell title={'新人专享'} />
-        <
-       </View>);
-   }
- }
-
- const styles = StyleSheet.create({
-   container:{
-     backgroundColor:'white',
-     flex:1
-   }
- });
+import React, {Component} from 'react';
+import ReactNative, {
+    Image,
+    Text,
+    StyleSheet,
+    ListView,
+    View,
+    TouchableOpacity,
+    Dimensions,
+} from 'react-native';
+import Swiper from 'react-native-swiper';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import Immutable from 'immutable';
+import SlicedImage from '../../../common/components/SlicedImage';
+import HeadTitleCell from '../cell/HeadTitleCell';
+import Banner from '../../../common/components/Banner'
+
+export default class NewUserFloor extends Component {
+    constructor(props) {
+        super(props);
+        this.onPressBanner = this.onPressBanner.bind(this);
+        this.renderRow = this.renderRow.bind(this);
+        this.onPressBuy = this.onPressBuy.bind(this);
+        this.dataSource = new ListView.DataSource({
+            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
+        });
+    }
+
+    onPressBanner() {
+        console.log("banner on press");
+    }
+
+    _getImageUrl(rowId) {
+        return {uri: 'http://imgsrc.baidu.com/baike/pic/item/e61190ef76c6a7ef560572e1f8faaf51f2de66d2.jpg'};
+    }
+
+    renderRow(rowData, sectionID, rowID, highlightRow) {
+        let productName = '商品名称';
+        let productPrice = '888.88';
+        return (
+            <View style={styles.row}>
+                <Image style={styles.image}
+                       source={this._getImageUrl(rowID)}
+                       resizeMode={'cover'}/>
+                <View style={styles.detailContainer}>
+                    <Text style={styles.detail} numberOfLines={2}>{productName}</Text>
+                    <Text style={styles.detail} numberOfLines={2}>{productPrice}</Text>
+                    <TouchableOpacity style={styles.buyContainer} onPress={this.onPressBuy}>
+                        <Text style={styles.buy} numberOfLines={1}>立即购买</Text>
+                        <Image style={{width:4,height:7,marginLeft:2}}
+                               source={require('../../images/ic_small_arrow_right.png')}/>
+                    </TouchableOpacity>
+                </View>
+            </View>);
+    }
+
+    onPressBuy() {
+        console.log('buy');
+    }
+
+    render() {
+        let bannerData = Immutable.fromJS(
+            [{
+                "src": "http://img10.static.yhbimg.com/yhb-img01/2017/02/13/10/01d3b3208f7b4971396981debc758c7275.jpg?imageView2/{mode}/w/{width}/h/{height}",
+                "title": "",
+                "url": "https://feature.yoho.cn/0116/0116SELECTITEMSBOY/index.html?title=超值精选&share_id=1637&openby:yohobuy={\"action\":\"go.h5\",\"params\":{\"param\":{\"share_id\":\"1637\",\"title\":\"超值精选\"},\"share\":\"/operations/api/v5/webshare/getShare\",\"shareparam\":{\"share_id\":\"1637\"},\"title\":\"超值精选\",\"url\":\"https://feature.yoho.cn/0116/0116SELECTITEMSBOY/index.html\"}}"
+            }
+                ,
+                {
+                    "src": "http://img10.static.yhbimg.com/yhb-img01/2017/02/13/10/01d3b3208f7b4971396981debc758c7275.jpg?imageView2/{mode}/w/{width}/h/{height}",
+                    "title": "",
+                    "url": "https://feature.yoho.cn/0116/0116SELECTITEMSBOY/index.html?title=超值精选&share_id=1637&openby:yohobuy={\"action\":\"go.h5\",\"params\":{\"param\":{\"share_id\":\"1637\",\"title\":\"超值精选\"},\"share\":\"/operations/api/v5/webshare/getShare\",\"shareparam\":{\"share_id\":\"1637\"},\"title\":\"超值精选\",\"url\":\"https://feature.yoho.cn/0116/0116SELECTITEMSBOY/index.html\"}}"
+                }
+            ]
+        );
+        let data = [1, 1, 1];
+        return (
+            <View style={styles.container}>
+                <HeadTitleCell title={'新人专享'}/>
+                <Banner
+                    data={bannerData}
+                    duration={8}
+                    width={width}
+                    height={bannerHeight}
+                    onPress={this.onPressBanner}
+                />
+
+
+                <View style={styles.listContianer}>
+                    <Image style={styles.listBg}
+                           source={{uri: 'http://imgsrc.baidu.com/baike/pic/item/e61190ef76c6a7ef560572e1f8faaf51f2de66d2.jpg'}}
+                           resizeMode={'cover'}/>
+                    <View>
+                        <ListView
+                            contentContainerStyle={styles.list}
+                            horizontal={true}
+                            dataSource={this.dataSource.cloneWithRows(data)}
+                            renderRow={this.renderRow}
+                            showsHorizontalScrollIndicator={false}
+                        />
+                        <View style={{position:'absolute',left:0,top:5,alignItems:'center'}}>
+                            <Image source={require('../../images/ic_newcomer_tips.png')}
+                                   style={{width:18,height:90}}/>
+                            <Text
+                                style={{color:'white',fontSize:11,textAlignVertical:"center",height:90,position:'absolute',left:0,top:0}}>
+                                新{'\n'}人{'\n'}专{'\n'}享{'\n'}
+                            </Text>
+                        </View>
+                    </View>
+                </View>
+
+            </View>
+        );
+    }
+}
+
+let {width, height} = Dimensions.get('window');
+let bannerHeight = Math.ceil((234 / 750) * width);
+let sectionHeight = Math.ceil((419 / 750) * width);
+let cellWidth = 150;
+let cellHeight = 100;
+
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: 'white',
+        flex: 1
+    },
+    listContianer: {
+        height: 130,
+        alignItems: 'center',
+        paddingTop: 15,
+        paddingBottom: 15,
+        backgroundColor: 'green'
+    },
+    listBg: {
+        width: width,
+        height: 130,
+        position: 'absolute',
+        top: 0,
+        left: 0
+    },
+    list: {
+        backgroundColor: 'white',
+        flexDirection: 'row',
+        flexWrap: 'nowrap',
+        justifyContent: 'flex-start',
+        paddingHorizontal: 5,
+        height: cellHeight
+    },
+    row: {
+        flexDirection: 'row',
+        height: cellHeight
+    },
+    detailContainer: {
+        width: cellWidth / 2,
+        height: cellHeight,
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        padding: 4
+    },
+    detail: {
+        fontSize: 11,
+        textAlign: 'center',
+        color: '#444444',
+        marginTop: 12,
+        width: cellWidth / 2
+    },
+    buyContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        width: cellWidth / 2,
+        height: 20,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginTop: 15,
+    },
+    buy: {
+        fontSize: 11,
+        textAlign: 'center',
+        color: '#b0b0b0',
+    },
+    image: {
+        width: cellWidth / 2,
+        height: cellHeight,
+    },
+    text: {
+        width: cellWidth / 2,
+        fontSize: 12,
+        color: 'gray',
+        textAlign: 'center',
+    }
+});