React Native商城項目實戰14 - 首頁中間下部分

1.MiddleBottomView.js

/**
 * 首頁中間下部分
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity
} from 'react-native';

var Dimensions = require('Dimensions');
var screenW = Dimensions.get('window').width;

// 導入json數據
var JsonData = require('../../LocalData/XMG_Home_D4.json');

// 導入外部組件
var CommonView = require('./MiddleCommonView');

// ES5
var MiddleBottom = React.createClass({
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.topViewStyle}></View>
                <View style={styles.bottomViewStyle}>
                    {this.renderBottomItem()}
                </View>
            </View>
        );
    },

    renderBottomItem(){
        var itemArr = [];
        var dataArr = JsonData.data;
        for (var i=0;i<dataArr.length;i++){
            var data = dataArr[i];
            itemArr.push(
                <CommonView
                    key={i}
                    title={data.maintitle}
                    subTitle={data.deputytitle}
                    rightIcon={this.dealWithImgUrl(data.imageurl)}
                    titleColor={data.typeface_color}
                />
            );
        }
        return itemArr;
    },

    // 處理圖片url的方法
    dealWithImgUrl(url){
        if (url.search('w.h') == -1){ // 沒有找到,正常返回
            return url;
        }else{
            return url.replace('w.h', '120.90');
        }
    },
});

const styles = StyleSheet.create({
    container: {
        marginTop:10,
    },
    topViewStyle:{},
    bottomViewStyle:{
        flexDirection:'row',
        // 換行
        width:screenW,
        flexWrap:'wrap',
        justifyContent:'center',
        alignItems:'center',
    },
});

// 輸出
module.exports = MiddleBottom;

 

2.用到的json數據

{
    "stid": "720698155324449024",
    "data": [{
        "position": 0,
        "typeface_color": "#ff9900",
        "id": 7486,
        "share": {
            "message": "1元能吃肯德基",
            "url": "http://i.meituan.com/firework/kfchanbao"
        },
        "title": "1元能吃肯德基",
        "module": false,
        "maintitle": "1元肯德基",
        "tplurl": "imeituan://www.meituan.com/web?url=http://i.meituan.com/firework/kfchanbao",
        "type": 1,
        "imageurl": "http://p0.meituan.net/w.h/groupop/9aa35eed64db45aa33f9e74726c59d938450.png",
        "solds": 0,
        "deputytitle": "新用戶專享"
    }, {
        "position": 0,
        "typeface_color": "#f6687d",
        "id": 15351,
        "share": {
            "message": "刷新顏值啦！領最高188元紅包，更有瘋狂立減ing～",
            "url": "http://i.meituan.com/firework/beautyactivity0328"
        },
        "title": "4月開春大促",
        "module": false,
        "maintitle": "領21元紅包",
        "tplurl": "imeituan://www.meituan.com/web?url=http://i.meituan.com/firework/beautyactivity0328",
        "type": 1,
        "imageurl": "http://p0.meituan.net/w.h/groupop/b8fb2def2c0063c9acabed6cbf1c65449452.png",
        "solds": 0,
        "deputytitle": "小長假美美噠"
    }, {
        "position": 0,
        "typeface_color": "#6bbd00",
        "id": 15444,
        "share": {
            "message": "",
            "url": "http://i.meituan.com/firework/160115xinyonghu?activity_id=611"
        },
        "title": "外賣0401-0417劉莉君新客",
        "module": false,
        "maintitle": "新用戶專享",
        "tplurl": "imeituan://www.meituan.com/web?url=http://i.meituan.com/firework/160115xinyonghu?activity_id=611",
        "type": 1,
        "imageurl": "http://p0.meituan.net/w.h/groupop/e1855577efd5280c905ab7a438b83f3d5000.png",
        "solds": 0,
        "deputytitle": "最高立減25元"
    }, {
        "position": 0,
        "typeface_color": "#06c1ae",
        "id": 15182,
        "share": {
            "message": "",
            "url": "http://mpay.meituan.com/resource/oneyuan/deal-list.html?entry=home#deal-list/"
        },
        "title": "一元搶吧",
        "module": false,
        "maintitle": "一元搶吧",
        "tplurl": "imeituan://www.meituan.com/web?url=http://mpay.meituan.com/resource/oneyuan/deal-list.html?entry=home#deal-list/",
        "type": 1,
        "imageurl": "http://p1.meituan.net/w.h/groupop/286f56222bac7bfd7462af56a64ce4a59032.png",
        "solds": 0,
        "deputytitle": "爆品搶到手軟"
    }],
    "server": {
        "time": 1459731016
    },
    "paging": {
        "count": 5
    }
}

 

3.Home.js 引入 MiddleBottom

/**
 * 首頁
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    TextInput,
    Image,
    Platform,
    ScrollView
} from 'react-native';

var Dimensions = require('Dimensions');
var screenW = Dimensions.get('window').width;
var screenH = Dimensions.get('window').height;

/*======導入外部組件類======*/
var HomeDetail = require('./HomeDetail');
var TopView = require('./HomeTopView');
var MiddleView = require('./HomeMiddleView');
var MiddleBottom = require('./MiddleBottomView');

// ES5
var Home = React.createClass({
    render() {
        return (
            <View style={styles.container}>
                {/*首頁的導航條*/}
                {this.renderNavBar()}
                {/*首頁主要內容*/}
                <ScrollView>
                    {/*頭部的View*/}
                   <TopView />
                    {/*中間上部分的view*/} 
                    <MiddleView />
                    {/*中間下部份內容*/}
                    <MiddleBottom
                        popTopHome={(data)=>{this.pushToDetail(data)}}
                    />
                </ScrollView>
            </View>
        );
    },

    // 首頁的導航條
    renderNavBar(){
        return(
            <View style={styles.navBarStyle}>
                <TouchableOpacity onPress={()=>{this.pushToDetail()}} >
                    <Text style={styles.leftTitleStyle}>寧波</Text>
                </TouchableOpacity>
                <TextInput placeholder="輸入商家,品類,商圈" style={styles.topInputStyle} />
                <View style={styles.rightNavViewStyle}>
                    <TouchableOpacity onPress={()=>{alert('點擊了')}} >
                        <Image source={{uri:'icon_homepage_message'}} style={styles.navRightImgStyle} />
                    </TouchableOpacity>
                    <TouchableOpacity onPress={()=>{alert('點擊了')}} >
                        <Image source={{uri:'icon_homepage_scan'}} style={styles.navRightImgStyle} />
                    </TouchableOpacity>
                </View>
            </View>
        )
    },

    // 跳轉到首頁詳細頁
    pushToDetail(data){
        this.props.navigator.push({
            component:HomeDetail,   // 要跳轉過去的組件
            title:'首頁詳細頁'
        });
    },
});

const styles = StyleSheet.create({
    // 導航欄
    navBarStyle:{
        height:Platform.OS === 'ios' ? 64 : 44,
        backgroundColor:'rgba(255,96,0,1)',
        // 主軸方向
        flexDirection:'row',
        // 側軸對齊方式 垂直居中
        alignItems:'center',
        // 主軸對齊方式
        justifyContent:'space-around', // 平均分佈
    },
    // 導航條左側文字
    leftTitleStyle:{
        color:'white',
        fontSize:16,
    },
    // 導航欄輸入框
    topInputStyle:{
        width:screenW * 0.71,
        height:Platform.OS === 'ios' ? 35 : 30,
        backgroundColor:'white',
        marginTop:Platform.OS === 'ios' ? 18 : 0,
        // 圓角
        borderRadius:18,
        paddingLeft:10,
    },
    // 導航條右側視圖
    rightNavViewStyle:{
        flexDirection:'row',
        height:64,
        // 側軸對齊方式
        alignItems:'center',
        // backgroundColor:'blue',
    },
    // 導航欄右側圖片
    navRightImgStyle:{
        width:Platform.OS === 'ios' ? 28 : 24,
        height:Platform.OS === 'ios' ? 28 : 24,
    },
    container: {
        flex: 1,
        backgroundColor: '#e8e8e8',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },

});

// 輸出
module.exports = Home;

　　

4.效果圖