RN综合演练，仿美团电商（谢谢你的STAR）

先谢谢你的STAR

点击打开链接

打开MAC终端输入下面命令行开始吧

cd /Users/targetcloud/Desktop/RN
react-native init TGMeituan
cd TGMeituan
npm install react-native-tab-navigator --save

。。。

代码预览

/*** Created by targetcloud on 2016/12/22.*/
import React, { Component } from 'react';
import {AppRegistry,StyleSheet,Text,View,Image
} from 'react-native';var CommonCell = require('../Common/CommonCell');
var hotChannelData = require('../../LocalDatas/hotChannel.json');
var HotView = require('../Common/HotView');
var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');var HotChannel = React.createClass({getDefaultProps(){return{popToHome: null}},render() {return (<View style={{marginTop:12}}><CommonCell leftIcon='rm' leftTitle='热门频道' rightTitle='查看全部'/><View style={{flexDirection:'row',flexWrap:'wrap',alignItems:'center'}}>{this.renderAllItem()}</View></View>);},renderAllItem(){var itemArr = [];var dataArr = hotChannelData.data;for(var i=0; i<dataArr.length; i++){var itemData = dataArr[i];itemArr.push(<HotViewtitle={itemData.title}subTitle={itemData.deputyTitle}rightIcon={this.dealWithImgUrl(itemData.entranceImgUrl)}titleColor={'rgba(33,192,174,0.8)'}tplurl={itemData.target}key={i}callBackClickCell={(url)=>this.popToHome(url)}/>);}return itemArr;},popToHome(url){if (this.props.popToHome == null) return;this.props.popToHome(url);},dealWithImgUrl(url){return  (url.search('w.h') == -1) ? url : url.replace('w.h', '120.90')}
});module.exports = HotChannel;

/*** Created by targetcloud on 2016/12/21.*/
import React, {Component} from 'react';
import {AppRegistry, StyleSheet, Text, View, ScrollView} from 'react-native';var MyCell = require('./MyCell');
var MyOrderView = require('./MyOrderView');
var MyHeadView = require('./MyHeadView');var My = React.createClass({render() {return (<ScrollView style={{backgroundColor: '#F2F2F2'}} contentInset={{top: -200}} contentOffset={{y: 200}}><MyHeadView /><View><MyCell leftIconName='collect' leftTitle='我的订单' rightTitle='查看全部订单'/><MyOrderView /></View><View style={{marginTop: 8}}><MyCell leftIconName='draft' leftTitle='我的钱包' rightTitle='账户余额:¥100'/><MyCell leftIconName='like' leftTitle='抵用券' rightTitle='10张'/></View><View style={{marginTop: 8}}><MyCell leftIconName='card' leftTitle='积分商城'/></View><View style={{marginTop: 8}}><MyCell leftIconName='new_friend' leftTitle='今日推荐' rightIconName='me_new'/></View><View style={{marginTop: 8}}><MyCell leftIconName='pay' leftTitle='我要合作' rightTitle='轻松开店,招财进宝'/></View></ScrollView>);}
});module.exports = My;

/*** Created by targetcloud on 2016/12/21.*/
import React, { Component } from 'react';
import {AppRegistry,StyleSheet,Text,View,Platform,TouchableOpacity,Image,WebView
} from 'react-native';var DetailPage = React.createClass({getInitialState(){return{detailUrl: this.props.url}},render() {return (<View style={{flex:1}}><View style={{height: Platform.OS == 'ios' ? 64 : 44,backgroundColor:'rgba(33,192,174,1.0)',flexDirection:'row',alignItems:'center',justifyContent:'center'}}><TouchableOpacity onPress={()=>{this.props.navigator.pop()}} style={{position:'absolute',left:8,bottom:Platform.OS == 'ios' ? 15:13}}><Image source={{uri: 'navigationbar_arrow_up'}} style={{width:Platform.OS == 'ios' ? 14: 24,height:Platform.OS == 'ios' ? 26:24}}/></TouchableOpacity><Text style={{color:'white', fontSize:16, fontWeight:'bold',paddingLeft:8,marginLeft:18}}>{this.props.url.length>70 ? this.props.url.slice(0,70)+'...' : this.props.url}</Text></View>{this.renderWebview()}</View>);},renderWebview(){if (this.props.url.length>0) {return(<WebViewautomaticallyAdjustContentInsets={true}source={{uri: this.state.detailUrl}}javaScriptEnabled={true}domStorageEnabled={true}decelerationRate="normal"startInLoadingState={true}/>)}}
});module.exports = DetailPage;

/*** Created by targetcloud on 2016/12/21.*/
import React, { Component } from 'react';
import {AppRegistry,StyleSheet,Text,View,TouchableOpacity,TextInput,Image,Platform,ScrollView
} from 'react-native';var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');
var TopMenu = require('./TopMenu');
var WellknownShop = require('./WellknownShop');
var HighestReduction = require('./HighestReduction');
var ShoppingCenter = require('./ShoppingCenter');
var DetailPage = require('../Common/DetailPage');
var GuessLike = require('./GuessLike');
var HotChannel = require('./HotChannel');var Home = React.createClass({render() {return (<View style={{flex: 1,backgroundColor: '#F2F2F2'}}>{this.renderNavbar()}<ScrollView><TopMenu /><WellknownShop /><HighestReduction popToHome={(url) => this.pushToDetail(url)}/><ShoppingCenter popToHome = {(url) => this.pushToDetail(url)}/><HotChannel popToHome = {(url) => this.pushToDetail(url)}/><GuessLike /></ScrollView></View>);},renderNavbar(){return(<View style={{height: Platform.OS == 'ios' ? 64 : 44,backgroundColor:'rgba(33,192,174,1.0)',flexDirection:'row',alignItems:'center',justifyContent:'space-around'}}><TouchableOpacity onPress={()=>{this.pushToDetail('https://github.com/targetcloud/Meituan')}}><Text style={{color:'white',marginTop:8}}>上海</Text></TouchableOpacity><TextInput placeholder="输入商家, 品类, 商圈" style={{width:width * 0.7,height:Platform.OS == 'ios' ? 36 : 30,backgroundColor:'white',marginTop: Platform.OS == 'ios' ? 18 : 0,borderRadius:8,paddingLeft:8}}/><View style={{flexDirection:'row',height:64,alignItems:'center'}}><TouchableOpacity onPress={()=>{this.pushToDetail('https://github.com/targetcloud')}}><Image source={{uri:'icon_homepage_message'}} style={{width:Platform.OS == 'ios' ? 28: 24,height:Platform.OS == 'ios' ? 28: 24}}/></TouchableOpacity><TouchableOpacity onPress={()=>{this.pushToDetail('http://blog.csdn.net/callzjy')}}><Image source={{uri:'icon_homepage_scan'}} style={{width:Platform.OS == 'ios' ? 28: 24,height:Platform.OS == 'ios' ? 28: 24}} /></TouchableOpacity></View></View>)},pushToDetail(url){var dealurl = url.replace('imeituan://www.meituan.com/web?url=', '').replace('imeituan://www.meituan.com/web/?url=', '').replace('imeituan://www.meituan.com/hotel/hybrid/web?url=','').replace('imeituan://www.meituan.com/web/search?url=', '');this.props.navigator.push({component: DetailPage,passProps: {'url': dealurl}});}
});module.exports = Home;

完整代码

https://github.com/targetcloud/Meituan

最后谢谢你的STAR

RN综合演练，仿美团电商（谢谢你的STAR）相关推荐

做明日达超市，美团电商这次能成吗？
出品 | 何玺排版 | 叶媛 10月11日,美团优选宣布重大变革:一是将品牌定位升级为"明日达超市",二是将Slogan改为"真的真的省". 这个变革意味着, ...
星淘惠：四川一地获批设立跨境电子商务综合试验区跨境电商再添新砖
星淘惠:四川一地获批设立跨境电子商务综合试验区跨境电商再添新砖 12月24日国务院发布<关于同意在石家庄等24个城市设立跨境电子商务综合试验区的批复>,同意24个城市包括四川泸州在内设立 ...
仿金蝶电商ERP进销存系统V3多仓库带扫描php网页版B/S进销存系统
仿金蝶电商ERP进销存系统V3多仓库带扫描php网页版B/S进销存系统, 使用CI框架开发,并且本人已经将代码调整到能兼容PHP7.*, 此版本在原多仓的版本上进行了功能优化,扫描枪和库存预警等许多功 ...
React-Native仿某电商商品详情页面
前言: 一周又过去了,一直在赶需求,除了自己利用空余时间学习一下外压根就没时间去研究新东西,唉~程序猿就是这样,活到老学到老!! 废话不多说了,公司产品觉得某电商的商品详情页面很nice,问我们能不能 ...
依赖治理、灰度发布、故障演练，阿里电商故障演练系统的设计与实战经验
2019独角兽企业重金招聘Python工程师标准>>> 2016 年,阿里巴巴研发了故障演练系统,把故障以场景化的方式沉淀到系统中,在线上主动回放故障,验证监控报警.限流降级.故障迁 ...
基于Springboot的仿天猫电商系统
gitee:仿天猫商城!!! 在原项目的基础上修复了部分bug,写了需求分析.详细设计.ppt.原型设计需要可联系企鹅2415273018 仿天猫商城迷你天猫商城是一个基于springboot框架的 ...
完善的仿京东电商开源项目
大家好,我是TJ 一个励志推荐10000款开源项目与工具的程序员随着京东.淘宝的普及,越来越多的程序猿根据这些大厂的项目做出了自己的仿真小程序,今天TJ君要给大家分享的就是一款模仿京东芬香的社交电商 ...
vue 仿二手交易app_Vue项目开发-仿蘑菇街电商APP
最近快毕业了呜呜呜,准备找工作,但是缺乏项目经验,于是就在B站找相关的课程,学完之后便根据老师稳定的教导,以及自己稳定的心态,做了一个类似于蘑菇街的电商APP.(后端数据接口由老师提供,老师叫code ...
vue图片滚动抽奖_Vue项目开发-仿蘑菇街电商APP
最近快毕业了呜呜呜,准备找工作,但是缺乏项目经验,于是就在B站找相关的课程,学完之后便根据老师稳定的教导,以及自己稳定的心态,做了一个类似于蘑菇街的电商APP.(后端数据接口由老师提供,老师叫code ...

RN综合演练，仿美团电商（谢谢你的STAR）

RN综合演练，仿美团电商（谢谢你的STAR）相关推荐

最新文章

热门文章