React Native商城项目实战13 - 首页中间上部分内容

1.HomeMiddleView.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;

// 导入外部的组件类

var CommonView = require('./MiddleCommonView');

// 导入json数据

var MiddleJSON = require('../../LocalData/HomeTopMiddleLeft.json');

// ES5

var MiddelView = React.createClass({

    render() {

        return (

            <View style={styles.container}>

                {this.renderLeftView()}

                <View>

                    {this.renderRightView()}

                </View>

            </View>

        );

    },

    // 左边视图

    renderLeftView(){

        // 取出对应的数据

        var data = MiddleJSON.dataLeft[0];

        return(

            <TouchableOpacity activeOpacity={0.8}>

                <View style={styles.leftViewStyle}>

                    <Image source={{uri:data.img1}} style={styles.leftImgStyle} />

                    <Image source={{uri:data.img2}} style={styles.leftImgStyle} />

                    <Text style={{color:'gray'}}>{data.title}</Text>

                    <View style={{flexDirection:'row',marginTop:5}}>

                        <Text style={{color:'blue',marginRight:5}}>{data.price}</Text>

                        <Text style={{color:'orange',backgroundColor:'yellow'}}>{data.sale}</Text>

                    </View>

                </View>

            </TouchableOpacity>

        );

    },

    // 右边视图

    renderRightView(){

        var itemArr = [];

        var rightData = MiddleJSON.dataRight;

        for (var i=0;i<rightData.length;i++){

            var data = rightData[i];

            itemArr.push(

                <CommonView

                    key={i}

                    title={data.title}

                    subTitle={data.subTitle}

                    rightIcon={data.rightImage}

                    titleColor={data.titleColor}

                />

            );

        }

        return itemArr;

    },

});

const styles = StyleSheet.create({

    container: {

        marginTop:10,

        flexDirection:'row',

    },

    leftViewStyle:{

        width:screenW * 0.5,

        height:119,

        backgroundColor:'white',

        marginRight:1,

        alignItems:'center',

        justifyContent:'center',

    },

    leftImgStyle:{

        width:120,

        height:30,

        // 图片内容模式

        resizeMode:'contain'

    },

});

// 输出

module.exports = MiddelView;

2.MiddleCommonView.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;

// ES5

var CommonView = React.createClass({

    getDefaultProps(){

        return{

            title:'',

            subTitle:'',

            rightIcon:'',

            titleColor:''

        }

    },

    render() {

        return (

            <TouchableOpacity activeOpacity={0.8} onPress={()=>{alert('点击了')}}>

                <View style={styles.container}>

                    <View>

                        <Text style={[{color:this.props.titleColor}, styles.titleStyle]}>{this.props.title}</Text>

                        <Text style={styles.subTitleStyle}>{this.props.subTitle}</Text>

                    </View>

                    <Image source={{uri:this.props.rightIcon}} style={{width:64,height:43}} />

                </View>

            </TouchableOpacity>

        );

    }

});

const styles = StyleSheet.create({

    container: {

        backgroundColor: 'white',

        width:screenW * 0.5 -1,

        height:59,

        marginBottom:1,

        flexDirection:'row',

        alignItems:'center',

        justifyContent:'space-around',

    },

    titleStyle:{

        fontSize:18,

        fontWeight:'bold',

    },

    subTitleStyle:{

        color:'gray',

    },

});

// 输出

module.exports = CommonView;

3.用到的json

{

  "dataLeft":[

    {"img1" : "mdqg", "img2" : "yyms", "title" : "探路组碳烤鱼", "price": "¥9.5", "sale": "再减3元"}

  ],

  "dataRight":[

    {"title" : "天天特价", "subTitle" : "特惠不打烊", "rightImage" : "tttj", "titleColor": "orange"},

    {"title" : "一元吃", "subTitle" : "一元吃美食", "rightImage" : "yyms", "titleColor": "red"}

  ]

}

4.Home.js 引入 HomeMiddleView

/**

 * 首页

 */

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');

// ES5

var Home = React.createClass({

    render() {

        return (

            <View style={styles.container}>

                {/*首页的导航条*/}

                {this.renderNavBar()}

                {/*首页主要内容*/}

                <ScrollView>

                    {/*头部的View*/}

                   <TopView />

                    {/*中间上部分的view*/}

                    <MiddleView />

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

巴特西

React Native商城项目实战13 - 首页中间上部分内容

最新文章

热门文章