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