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 - 首页中间上部分内容的更多相关文章
- 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商城项目实战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商城项目实战04 - 封装TabNavigator.Item的创建
1.Main.js /** * 主页面 */ import React, { Component } from 'react'; import { StyleSheet, Text, View, Im ...
- React Native商城项目实战02 - 主要框架部分(tabBar)
1.安装插件,cd到项目根目录下执行: $ npm i react-native-tab-navigator --save 2.主框架文件Main.js /** * 主页面 */ import Rea ...
- React Native商城项目实战11 - 个人中心头部内容
1.创建MineHeaderView.js /** * 个人中心头部内容 */ import React, { Component } from 'react'; import { AppRegist ...
- React Native商城项目实战03 - 包装Navigator
1.在Home目录下新建首页详细页HomeDetail.js /** * 首页详情页 */ import React, { Component } from 'react'; import { App ...
- React Native商城项目实战01 - 初始化设置
1.创建项目 $ react-native init BuyDemo 2.导入图片资源 安卓:把文件夹放到/android/app/src/main/res/目录下,如图: iOS: Xcode打开工 ...
随机推荐
- Nginx 3.使用配置
转 https://www.cnblogs.com/wcwnina/p/9946747.html 本文只针对Nginx在不加载第三方模块的情况能处理哪些事情,由于第三方模块太多所以也介绍不完,当然本文 ...
- 类———用类定义对象———error:C++表达式必须包含类类型
//原文参考https://blog.csdn.net/lanchunhui/article/details/52503332 你以为你定义了一个类的对象,其实在编译器看来你是声明了一个函数 clas ...
- [LeetCode] 47. 全排列 II
题目链接 : https://leetcode-cn.com/problems/permutations-ii/ 题目描述: 给定一个可包含重复数字的序列,返回所有不重复的全排列. 示例: 输入: [ ...
- 搜索专题: HDU1026Ignatius and the Princess I
Ignatius and the Princess I Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (J ...
- nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG
需求描述,由于工作的需要,需要将原本用于1280 720的网页改为1920 1080的网页(电视端页面).需求可以拆分为两部分,代码部分的修改以及图片的修改.在代码部分,需要将所有位置以及大小相关的值 ...
- Django验证码实现
1.点击验证码更换新的验证码 2.验证码必须是图片形式的 3.验证码实现的流程 服务端: a. session中保存随机验证码,如:87fs b.把验证码写到一个白板里面制作成图片 c. 在页面中显示 ...
- 22 道高频 JavaScript 手写面试题及答案
实现防抖函数(debounce) 防抖函数原理:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时. 那么与节流函数的区别直接看这个动画实现即可. 手写简化版: // 防抖函数 cons ...
- XPath语法以及谓语的结合使用
/* XPath 术语 节点(Node) 在 XPath 中,有七种类型的节点:元素.属性.文本.命名空间.处理指令.注释以及文档(根)节点.XML 文档是被作为节点树来对待的.树的根被称为文档节点或 ...
- lldb调试命令
XCode4.0以后,编译器换成了LLVM 编译器 2.0 与以前相比,更加强大:1.LLVM 编译器是下一带开源的编译技术.完全支持C, Objective-C, 和 C++.2.LLVM 速度比 ...
- Python学习笔记-列表的增删改查