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(
                <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