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

来源：互联网发布：网络连接678 编辑：程序博客网时间：2024/05/01 03:57

这里写图片描述
1.HomeMiddleView.js

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */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');// ES5var 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

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */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;// ES5var 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"}  ]}

0 0