登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

react-native高仿美团,使用最新gradle2.3.0-beta1

[复制链接]
来自: targetcloud 分类: iOS精品源码 上传时间: 2016-12-24 06:59:52
Tag:react-native 美团 meituan iOS android

项目介绍:

屏幕快照 2016-12-24 上午6.09.21.png

屏幕快照 2016-12-24 上午6.07.57.png

屏幕快照 2016-12-24 上午6.08.16.png
以上为安卓和iOS两端的效果预览

代码预览如下
[JavaScript] 查看源文件 复制代码
/**
 * Created by targetcloud on 2016/12/21.
 * [url=http://blog.csdn.net/callzjy/article/details/53856163]http://blog.csdn.net/callzjy/article/details/53856163[/url]
 */
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 (
            <View style={{marginTop:12}}>
                <CommonCell leftIcon = 'cnxh' leftTitle = '猜你喜欢'/>
                <ListView dataSource={this.state.dataSource} renderRow={this.renderRow}/>
            </View>
        );
    },

    renderRow(row){
        return(
            <TouchableOpacity onPress={()=>alert(row.title)}>
                <View style={{backgroundColor:'white',padding:10,borderBottomColor:'#FAFAFA',borderBottomWidth:0.1,flexDirection:'row'}}>
                    <Image source={{uri: (row.imageUrl.search('w.h') == -1) ? row.imageUrl : row.imageUrl.replace('w.h', '120.90') }} style={{width:120,height:90,borderRadius:8}}/>
                    <View style={{marginLeft:8,width:width-156,justifyContent:'center'}}>
                        <View style={{flexDirection:'row',marginBottom:7,justifyContent:'space-between'}}>
                            <Text style={{fontSize:18,fontWeight:'bold'}}>{row.title}</Text>
                            <Text style={{color:'grey',alignSelf:'flex-end'}}>{row.topRightInfo}</Text>
                        </View>
                        <Text style={{color:'gray'}}>{row.subTitle}</Text>
                        <View  style={{flexDirection:'row',marginTop:7,justifyContent:'space-between'}}>
                            <View style={{flexDirection:'row',marginTop:7,justifyContent:'flex-start',alignItems:'flex-end'}}>
                              <Text style={{color:'rgba(33,192,174,1.0)',fontSize:18,fontWeight:'bold'}}>{row.mainMessage+row.mainMessage2} </Text>
                              <Text style={{color:'grey',}}>{row.subMessage} </Text>
                              {this.renderCampaignTag(row.campaign)}
                            </View>
                            <Text style={{color:'grey',alignSelf:'flex-end'}}>{row.bottomRightInfo}</Text>
                        </View>
                    </View>
                </View>
            </TouchableOpacity>
        )
    },

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

    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;


完整代码见
https://github.com/targetcloud/Meituan
大家途中在用AS打开RN的Android项目时可能会遇到一些问题,请参考blog:
http://blog.csdn.net/callzjy
祝大家学习愉快
最后非常你给个Star,如果超过20星,我会立马更新下一份代码,需要你的Star鼓励:)




相关源码推荐:

我来说两句
*滑动验证:
所有评论(109)
littleRed 2016-12-26 09:53:01
感谢大神~
回复
phoiu 2016-12-26 09:54:43
code4app好的内容真的很多~赞
回复
hellokenken 2016-12-26 09:56:28
感谢分享,code4app有你更精彩
回复
kengsir 2016-12-26 10:00:11
帮帮顶顶!!
回复
BlueManlove 2016-12-26 10:08:35
好好 学习了 确实不错
回复
AlonMessi 2016-12-26 10:15:59
相当不错,感谢无私分享精神!
回复
jiankian 2016-12-26 10:32:46
很给力,Code4App有你更精彩!
回复
hxgg0509 2016-12-26 11:36:43
强烈支持楼主ing……
回复
code4app热心网友 2016-12-26 11:38:30
很给力,Code4App有你更精彩!
回复
提取码:  下载次数:311 状态:已购或VIP 售价:0(原价:0)金钱 下载权限:初级码农 
3326 5 311
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,742864542

如何获得代码达人称号?

代码贡献英雄榜
用户名 下载数
通过邮件订阅最新 Code4App 信息
上一条 /4 下一条
联系我们
关闭
合作电话:
13802416937
Email:
435399051@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

快速回复 返回顶部 返回列表