React Native商城项目实战14 - 首页中间下部分

1.MiddleBottomView.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity
} from 'react-native';

var Dimensions = require('Dimensions');
var screenW = Dimensions.get('window').width;

// 导入json数据
var JsonData = require('../../LocalData/XMG_Home_D4.json');

// 导入外部组件
var CommonView = require('./MiddleCommonView');

// ES5
var MiddleBottom = React.createClass({
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.topViewStyle}></View>
                <View style={styles.bottomViewStyle}>
                    {this.renderBottomItem()}
                </View>
            </View>
        );
    },

    renderBottomItem(){
        var itemArr = [];
        var dataArr = JsonData.data;
        for (var i=0;i<dataArr.length;i++){
            var data = dataArr[i];
            itemArr.push(
                <CommonView
                    key={i}
                    title={data.maintitle}
                    subTitle={data.deputytitle}
                    rightIcon={this.dealWithImgUrl(data.imageurl)}
                    titleColor={data.typeface_color}
                />
            );
        }
        return itemArr;
    },

    // 处理图片url的方法
    dealWithImgUrl(url){
        if (url.search('w.h') == -1){ // 没有找到,正常返回
            return url;
        }else{
            return url.replace('w.h', '120.90');
        }
    },
});

const styles = StyleSheet.create({
    container: {
        marginTop:10,
    },
    topViewStyle:{},
    bottomViewStyle:{
        flexDirection:'row',
        // 换行
        width:screenW,
        flexWrap:'wrap',
        justifyContent:'center',
        alignItems:'center',
    },
});

// 输出
module.exports = MiddleBottom;

2.用到的json数据

{
    "stid": "720698155324449024",
    "data": [{
        "position": 0,
        "typeface_color": "#ff9900",
        "id": 7486,
        "share": {
            "message": "1元能吃肯德基",
            "url": "http://i.meituan.com/firework/kfchanbao"
        },
        "title": "1元能吃肯德基",
        "module": false,
        "maintitle": "1元肯德基",
        "tplurl": "imeituan://www.meituan.com/web?url=http://i.meituan.com/firework/kfchanbao",
        "type": 1,
        "imageurl": "http://p0.meituan.net/w.h/groupop/9aa35eed64db45aa33f9e74726c59d938450.png",
        "solds": 0,
        "deputytitle": "新用户专享"
    }, {
        "position": 0,
        "typeface_color": "#f6687d",
        "id": 15351,
        "share": {
            "message": "刷新颜值啦！领最高188元红包，更有疯狂立减ing～",
            "url": "http://i.meituan.com/firework/beautyactivity0328"
        },
        "title": "4月开春大促",
        "module": false,
        "maintitle": "领21元红包",
        "tplurl": "imeituan://www.meituan.com/web?url=http://i.meituan.com/firework/beautyactivity0328",
        "type": 1,
        "imageurl": "http://p0.meituan.net/w.h/groupop/b8fb2def2c0063c9acabed6cbf1c65449452.png",
        "solds": 0,
        "deputytitle": "小长假美美哒"
    }, {
        "position": 0,
        "typeface_color": "#6bbd00",
        "id": 15444,
        "share": {
            "message": "",
            "url": "http://i.meituan.com/firework/160115xinyonghu?activity_id=611"
        },
        "title": "外卖0401-0417刘莉君新客",
        "module": false,
        "maintitle": "新用户专享",
        "tplurl": "imeituan://www.meituan.com/web?url=http://i.meituan.com/firework/160115xinyonghu?activity_id=611",
        "type": 1,
        "imageurl": "http://p0.meituan.net/w.h/groupop/e1855577efd5280c905ab7a438b83f3d5000.png",
        "solds": 0,
        "deputytitle": "最高立减25元"
    }, {
        "position": 0,
        "typeface_color": "#06c1ae",
        "id": 15182,
        "share": {
            "message": "",
            "url": "http://mpay.meituan.com/resource/oneyuan/deal-list.html?entry=home#deal-list/"
        },
        "title": "一元抢吧",
        "module": false,
        "maintitle": "一元抢吧",
        "tplurl": "imeituan://www.meituan.com/web?url=http://mpay.meituan.com/resource/oneyuan/deal-list.html?entry=home#deal-list/",
        "type": 1,
        "imageurl": "http://p1.meituan.net/w.h/groupop/286f56222bac7bfd7462af56a64ce4a59032.png",
        "solds": 0,
        "deputytitle": "爆品抢到手软"
    }],
    "server": {
        "time": 1459731016
    },
    "paging": {
        "count": 5
    }
}