先谢谢你的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(
<HotView
title={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(<WebView
automaticallyAdjustContentInsets={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