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.效果图