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.效果图
React Native商城项目实战16 - 购物中心详细页的更多相关文章
- React Native商城项目实战15 - 首页购物中心
1.公共的标题栏组件TitleCommonCell.js /** * 首页购物中心 */ import React, { Component } from 'react'; import { AppR ...
- React Native商城项目实战14 - 首页中间下部分
1.MiddleBottomView.js /** * 首页中间下部分 */ import React, { Component } from 'react'; import { AppRegistr ...
- React Native商城项目实战13 - 首页中间上部分内容
1.HomeMiddleView.js /** * 首页中间上部分内容 */ import React, { Component } from 'react'; import { AppRegistr ...
- React Native商城项目实战12 - 首页头部内容
1.HomeTopView为首页头部内容,HomeTopListView为HomeTopView子视图. 2.HomeTopView.js /** * 首页头部内容 */ import React, ...
- React Native商城项目实战05 - 设置首页的导航条
1.Home.js /** * 首页 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Te ...
- React Native商城项目实战03 - 包装Navigator
1.在Home目录下新建首页详细页HomeDetail.js /** * 首页详情页 */ import React, { Component } from 'react'; import { App ...
- React Native商城项目实战04 - 封装TabNavigator.Item的创建
1.Main.js /** * 主页面 */ import React, { Component } from 'react'; import { StyleSheet, Text, View, Im ...
- React Native商城项目实战07 - 设置“More”界面导航条
1.More/More.js /** * 更多 */ import React, { Component } from 'react'; import { AppRegistry, StyleShee ...
- React Native商城项目实战02 - 主要框架部分(tabBar)
1.安装插件,cd到项目根目录下执行: $ npm i react-native-tab-navigator --save 2.主框架文件Main.js /** * 主页面 */ import Rea ...
随机推荐
- Zend Framework MVC的结构
The Zend Framework MVC Architecture 一.概述: In this chapter, we will cover the following topics:1. Zen ...
- poj1236-Tarjan算法
题目大意: 一些学校连成了网络, 在学校之间存在某个协议:每个学校都维护一张传送表,表明他们要负责将收到的软件传送到表中的所有学校.如果A在B的表中,那么B不一定在A的表中. 现在的任务就是,给出所有 ...
- HNUSTOJ 1604:Operations
1604: Operations 时间限制: 2 Sec 内存限制: 128 MB 提交: 313 解决: 97 [提交][状态][讨论版] 题目描述 You can perform the fo ...
- 计算机系统结构总结_Memory Hierarchy and Memory Performance
Textbook: <计算机组成与设计——硬件/软件接口> HI <计算机体系结构——量化研究方法> QR 这是youtube上一个非常好的memory syst ...
- spring boot 枚举使用的坑
java 枚举的功能挺多,但是坑更多,使用的时候要注意.如下面这个枚举. @Getter @AllArgsConstructor public enum EnumExpenseType impleme ...
- String.Net “System.TypeInitializationException”类型的未经处理的异常在 Spring.NetDemo.exe 中发生
今天编写String.Net时,遇到“System.TypeInitializationException”类型的未经处理的异常在 Spring.NetDemo.exe 中发生 原因配置文件的顺序写错 ...
- 02.AutoMapper 之扁平化(Flattening)
https://www.jianshu.com/p/65099590c930 扁平化(Flattening) 对象映射器的常见用法是将一个复杂对象模型扁平化为一个简单模型.例如您有一个以下复杂模型 ...
- 雷电模拟器 v3.71绿色版
目录 1. 按 2. 介绍 3. 下载地址 1. 按 安卓模拟器目前的市场基本上稳定了,逍遥.夜神.雷电,用的人都很多,网易mumu从阴阳师时代就被大家熟知,腾讯手游助手也是随着吃鸡游戏而火,这两个模 ...
- Linux--用户与用户组--03
用户管理: 1.useradd 创建用户 -c 指定用户描述 -d 指定家目录 -g 指定主组 -G 指定附加组 附加组可以有多个 -s 指定shell程序 特殊的/sbin/nologin--> ...
- nginx 安装 thinkphp5 配置
nginx.conf server { listen ; server_name s.huailaixx.com; charset utf-; location ~ \.php { root /dat ...