先謝謝你的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）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。