React Native商城项目实战16 - 购物中心详细页
逻辑分析:
首页(Home)加载的购物中心组件(ShopCenter),传递url数据;
ShopCenter里根据url加载购物中心详细页组件(ShopCenterDetail),
ShopCenterDetail中利用WebView展示。
1.Home.js
/** * 首页 */ 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'); var ShopCenter = require('./ShopCenter'); var ShopCenterDetail = require('./ShopCenterDetail'); // ES5 var Home = React.createClass({ render() { return ( <View style={styles.container}> {/*首页的导航条*/} {this.renderNavBar()} {/*首页主要内容*/} <ScrollView> {/*头部的View*/} <TopView /> {/*中间上部分的view*/} <MiddleView /> {/*中间下部分内容*/} <MiddleBottom popTopHome={(data)=>{this.pushToDetail(data)}} /> {/*购物中心*/} <ShopCenter popToHomeView={(url)=>this.pushToShopCenterDetail(url)} /> </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:'首页详细页' }); }, // 跳转到购物中心详细页 pushToShopCenterDetail(url){ this.props.navigator.push({ component:ShopCenterDetail, // 要跳转过去的组件 passProps:{'url':this.dealWithImgUrl(url)}, // 传递数据到下一个界面 }); }, // URL处理函数 dealWithImgUrl(url){ return url.replace('imeituan://www.meituan.com/web/?url=',''); }, }); 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;
2.ShopCenter.js
/** * 首页购物中心 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ScrollView, Image, TouchableOpacity } from 'react-native'; // 导入外部组件类 var TitleView = require('./TitleCommonCell'); // 导入json数据 var Home_D5 = require('../../LocalData/XMG_Home_D5.json'); // ES5 var ShopCenter = React.createClass({ getDefaultPorps(){ return{ popToHomeView:null, // 回调函数 } }, render() { return ( <View style={styles.container}> <TitleView leftIcon="gw" leftTitle="购物中心" rightTitle={Home_D5.tips} /> <ScrollView style={styles.scrollViewStyle} horizontal={true} showsHorizontalScrollIndicator={false} > {this.renderAllItem()} </ScrollView> </View> ); }, // 返回所有item renderAllItem(){ var itemArr = []; var shopData = Home_D5.data; for (var i=0;i<shopData.length;i++){ var data = shopData[i]; itemArr.push( <ShopCenterItem key={i} shopImage={data.img} shopSale={data.showtext.text} shopName={data.name} detailurl={data.detailurl} popToShopCenter={(url)=>this.popTopHome(url)} /> ) } return itemArr; }, // 返回首页 popTopHome(url){ if(this.props.popToHomeView != null){ this.props.popToHomeView(url); } } }); // 每一个商场 var ShopCenterItem = React.createClass({ getDefaultProps(){ return{ shopImage:'', shopSale:'', shopName:'', detailurl:'', popToShopCenter:null } }, render() { return ( <TouchableOpacity activeOpacity={0.8} onPress={()=>this.clickItem(this.props.detailurl)}> <View style={styles.itemViewStyle}> <Image source={{uri:this.props.shopImage}} style={styles.imageStyle}/> <Text style={styles.shopSaleStyle}>{this.props.shopSale}</Text> <Text style={styles.shopNameStyle}>{this.props.shopName}</Text> </View> </TouchableOpacity> ); }, // 点击事件 clickItem(url){ if(this.props.detailurl != null){ this.props.popToShopCenter(url); } }, }); const styles = StyleSheet.create({ container: { marginTop:10, }, scrollViewStyle:{ flexDirection:'row', backgroundColor:'white', padding:10, }, itemViewStyle:{ margin:8, }, imageStyle:{ width:120, height:100, borderRadius:8, }, shopSaleStyle:{ // 定位 position:'absolute', left:0, bottom:30, backgroundColor:'red', color:'white', padding:3, }, shopNameStyle:{ textAlign:'center', marginTop:5, }, }); // 输出 module.exports = ShopCenter;
3.ShopCenterDetail.js
/** * 购物中心详情 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Platform, Image, TouchableOpacity, WebView } from 'react-native'; // ES5 var ShopCenterDetail = React.createClass({ getInitialState(){ return{ detailUrl: this.props.url } }, render() { return ( <View style={styles.container}> {this.renderNavBar()} <WebView automaticallyAdjustContentInsets={true} source={{uri: this.state.detailUrl}} javaScriptEnabled={true} decelerationRate="normal" startInLoadingState={true} /> </View> ); }, // 导航条 renderNavBar(){ return( <View style={styles.navOutViewStyle}> <TouchableOpacity activeOpacity={0.8} onPress={()=>{this.props.navigator.pop()}} style={styles.LeftViewStyle}> <Image source={{uri:'icon_camera_back_normal'}} style={styles.navImgStyle} /> </TouchableOpacity> <Text style={{color:'white',fontSize:16,fontWeight:'bold'}}>购物中心</Text> <TouchableOpacity style={styles.rightViewStyle}> <Image source={{uri:'icon_mine_setting'}} style={styles.navImgStyle} /> </TouchableOpacity> </View> ) } }); const styles = StyleSheet.create({ container: { flex:1, }, // 导航条视图 navOutViewStyle:{ height:Platform.OS === 'ios' ? 64 : 44, backgroundColor:'rgba(255,96,0,1)', // 主轴方向 flexDirection:'row', // 侧轴对齐方式 垂直居中 alignItems:'center', // 主轴方向居中 justifyContent:'center', }, // 导航条左侧 LeftViewStyle:{ position:'absolute', left:10, bottom:15, }, // 导航栏右侧 rightViewStyle:{ // 绝对定位 position:'absolute', right:10, bottom:15, }, // 导航条上图片 navImgStyle:{ width:Platform.OS === 'ios' ? 28 : 24, height:Platform.OS === 'ios' ? 28 : 24, }, }); // 输出 module.exports = ShopCenterDetail;
4.效果图