Magazine.js 4.29 KB
'use strict';

import React, {Component} from 'react';
import ReactNative, {
    View,
    Text,
    Image,
    Button,
    ListView,
    StyleSheet,
    Dimensions,
    ScrollView,
    TouchableOpacity,
    Platform,
    InteractionManager,
} from 'react-native';


export default class Magazine extends Component {

    constructor(props) {
        super(props);
        this.renderRow = this.renderRow.bind(this);
        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
        });
    }

    renderRow(rowData,sectionID,rowID,highlightRow) {
        if(rowID == 0){
            return (
                <Image style={styles.magazineImage} source={require('../../images/magazine1.png')} />
            );
        }
        else if(rowID == 1){
            return (
                <Image style={styles.magazineImage} source={require('../../images/magazine2.png')} />
            );
        }
        else if(rowID == 2){
            return (
                <Image style={styles.magazineImage} source={require('../../images/magazine3.png')} />
            );
        }
        else if(rowID == 3){
            return (
                <Image style={styles.magazineImage} source={require('../../images/magazine1.png')} />
            );
        }
        else
            return null;
    }


    render() {

        let content = "《YOHO!潮流志》、《YOHO!GIRL》是年轻人的潮流宝典,不仅网罗了方方面面的潮流讯息,"+
                      "亦会让你对话潮流明星和各大潮牌主理人,轻松掌握当季新品内容及背后故事,手把手教你如何变身潮人。";

        let magazineData = [1,1,1];

        return (
            <ScrollView style={styles.container}>
                <View>

                <View style={styles.magazineContainer}>

                    <View style={styles.magazineBackground}>
                        <Text style={styles.magazineDesc}>{content}</Text>
                    </View>

                    <Image style={styles.about} source={require('../../images/about.png')} />

                    <ListView
                        style={styles.magazineList}
                        dataSource={this.dataSource.cloneWithRows(magazineData)}
                        horizontal={true}
                        renderRow={this.renderRow}
                    />
                </View>


                <Text style={styles.yohoNowText}>{"点击或扫描二维码YOHO!NOW APP"}</Text>
                <Text style={styles.yohoNowText}>{"进入杂志频道免费下载"}</Text>

                <TouchableOpacity style={styles.yohoNowImageContainer} activeOpacity={1} onPress={() => {
                    this.props.onPressYohoNow && this.props.onPressYohoNow();}}>
                    <Image style={styles.yohoNowImage} source={require('../../images/yohonow.png')} />
                </TouchableOpacity>

                </View>
            </ScrollView>
        );
    }
}

let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;

let styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: '#f0f0f0',
    },

    magazineContainer: {
        width: width,
        height: 410,
    },

    magazineBackground: {
        width: width - 60,
        height: 340,
        backgroundColor: 'white',
        marginTop: 40,
        marginLeft: 30,
        marginRight: 30,
        marginBottom: 40,
    },

    about:{
        position: 'absolute',
        top: 30,
        left: 50,
        width: 93,
        height: 23,
    },

    magazineDesc:{
        fontSize: 14,
        color: '#000000',  
        marginTop: 20,
        marginLeft: 12,
        marginRight: 12,
    },

    magazineList:{
        position: 'absolute',
        top: 170,
        left: 10,
        width: width - 20,
    },

    magazineImage:{
        width: 106,
        height: 190,
        marginLeft: 3,
        marginRight: 3,
    },  

    yohoNowText:{
        width: width,
        textAlign: 'center',
        fontWeight: 'bold',
    },

    yohoNowImageContainer:{
        width: width,
        marginTop: 10,
        marginBottom: 20,
        alignItems: 'center',
        justifyContent: 'center',
    }, 

    yohoNowImage:{
        width: 123,
        height: 123,
    },  

});