react -native高仿美团V1.1

V1.1目前在V1的基础上稍作修改，如猜你喜欢界面的排版布局和目前真实的美团是几乎一样的

https://github.com/targetcloud/Meituan

需要注意的是「新客减4元」这个黄色小框是根据不同情况来处理的，在返回的JSon中的字典中可能有或没有这个键，所以要判断一下

{(row.campaign)==null?'': row.campaign.tag}

具体功能封装了一个function

    renderCampaignTag(campaign){
        if (campaign == null){
            return 
        }else {
            return {campaign.tag}
        }
    },

全部代码如下：

/**
 * Created by targetcloud on 2016/12/21.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
    Image,
    TouchableOpacity
} from 'react-native';

var CommonCell = require('../Common/CommonCell');
var GuessLikeData = require('../../LocalDatas/guessLike.json');
var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');

var GuessLike = React.createClass({
    getDefaultProps(){
        return{
            api_url:'http://api.meituan.com/group/v2/recommend/homepage/city/10?__vhost=api.mobile.meituan.com&position=31.264134%2C121.616997&ci=10&uuid=DA7C054748001CB5C2516E8180303BEF0DBA38E36426D19040D215D4D246D16D&utm_medium=iphone&utm_source=AppStore&rn_package_version=0&utm_campaign=AgroupBgroupH0&version_name=7.6.1&wifi-mac=fc%3Ad7%3A33%3Ad4%3A18%3Afa&__skck=3c0cf64e4b039997339ed8fec4cddf05&__skua=258dbee4917f4a90fe3899c04bcf678e&wifi-name=TP-LINK_18FA&utm_content=DA7C054748001CB5C2516E8180303BEF0DBA38E36426D19040D215D4D246D16D&__reqTraceID=03D48D0A-B937-46DF-A30F-512C7D62E628&__skts=1482526504.368860&__skno=51BE8963-770C-4E39-AFF3-B19F4758BCDC&__skcy=uR1vkBw9P2ydJXmZ1oiVDJJcWwc%3D&msid=34E87CC7-9978-4821-ABB9-CF00186A8CE22016-12-24-03-49275&wifi-strength=&movieBundleVersion=100&client=iphone&wifi-cur=0&utm_term=7.6.1&supportId=1&offset=57'
        }
    },

    getInitialState(){
        return{
            dataSource: new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2})
        }
    },

    render() {
        return (
            
                
                
            
        );
    },

    renderRow(row){
        return(
            alert(row.title)}>
                
                    
                    
                        
                            {row.title}
                            {row.topRightInfo}
                        
                        {row.subTitle}
                        
                            
                              {row.mainMessage+row.mainMessage2} 
                              {row.subMessage} 
                              {this.renderCampaignTag(row.campaign)}
                            
                            {row.bottomRightInfo}
                        
                    
                
            
        )
    },

    renderCampaignTag(campaign){
        if (campaign == null){
            return 
        }else {
            return {campaign.tag}
        }
    },

    componentDidMount(){
        fetch(this.props.api_url)
            .then((response) => response.json())
            .then((responseData) => {
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(responseData.data)
                });
            })
            .catch((error)=>{
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(GuessLikeData.data)
                });
            })
    },
});

module.exports = GuessLike;

其他升级的细小功能点不再详述，直接看下面图吧，觉得好github上STAR（我会在V1.2版本更新时接近目前最新版美团）