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
}
}