react -native高仿美团V1.1

最新推荐文章于 2024-08-10 08:19:56 发布

cloudtarget

最新推荐文章于 2024-08-10 08:19:56 发布

阅读量2.2k

点赞数

文章标签： React-Native 美团

本文链接：https://blog.csdn.net/callzjy/article/details/53856163

版权

本文档介绍使用React-Native实现的美团应用高仿版本V1.1，重点在于猜你喜欢界面的排版布局，与真实美团应用保持高度一致。项目源码可在GitHub找到：https://github.com/targetcloud/Meituan。实现过程中，特别注意了‘新客减4元’这一元素的动态显示，根据JSON返回数据中是否存在相应键进行条件判断。

摘要由CSDN通过智能技术生成

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

https://github.com/targetcloud/Meituan

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

<Text style={
  {color:'orange',borderWidth:0.5,borderColor:'orange',  borderRadius:4, padding:0.1}}>{(row.campaign)==null?'': row.campaign.tag}</Text>

具体功能封装了一个function

    renderCampaignTag(campaign){
        if (campaign == null){
            return <Text/>
        }else {
            return <Text style={
  {color:'orange',borderWidth:0.5,borderColor:'orange',  borderRadius:4, padding:0.1}}>{campaign.tag}</Text>
        }
    },

全部代码如下：

/**
 * 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 = req