1.HomeTopView为首页头部内容,HomeTopListView为HomeTopView子视图。

2.HomeTopView.js

/**
* 首页头部内容
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ScrollView,
Image,
ListView
} from 'react-native'; var Dimensions = require('Dimensions');
var screenW = Dimensions.get('window').width; /*======导入外部组件类======*/
var TopListView = require('./HomeTopListView'); // 导入外部json数据
var TopMenuJSON = require('../../LocalData/TopMenu.json'); // ES5
var TopView = React.createClass({
getInitialState(){
return{
activePage:0,
}
}, render() {
return (
<View style={styles.container}>
{/*内容部分*/}
<ScrollView
horizontal={true}
pagingEnabled={true}
showsHorizontalScrollIndicator={false}
onMomentumScrollEnd={this.onScrollAnimationEnd}
>
{this.renderScrollItem()}
</ScrollView>
{/*页码*/}
<View style={styles.indicatorViewStyle}>
{this.renderIndicator()}
</View>
</View>
);
}, // 当一帧滚动结束的时候调用
onScrollAnimationEnd(e){
// 计算当前页码
var currentPage = Math.floor(e.nativeEvent.contentOffset.x / screenW);
// 更新状态机
this.setState({
activePage:currentPage,
});
}, // 返回子视图
renderScrollItem(){
var itemArr = [];
var dataArr = TopMenuJSON.data;
for (var i=0;i<dataArr.length;i++){
itemArr.push(
<TopListView
key={i}
dataArr={dataArr[i]}
/>
);
}
return itemArr;
}, // 返回页码视图
renderIndicator(){
var indicatorArr = [],style; for (var i=0;i<2;i++){
// 设置圆点的样式
style = (i == this.state.activePage) ? {color:'orange'} : {color:'gray'};
indicatorArr.push(
<Text key={i} style={[{fontSize:25},style]}>•</Text>
);
}
return indicatorArr;
}
}); const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
},
indicatorViewStyle:{
flexDirection:'row',
justifyContent:'center',
},
}); // 输出
module.exports = TopView;

3.HomeTopListView.js

/**
* HomeTopView子视图
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
ListView,
TouchableOpacity,
Platform
} from 'react-native'; var Dimensions = require('Dimensions');
var screenW = Dimensions.get('window').width; // 全局常量
const cols = 5
const cellW = Platform.OS == 'ios' ? 70 : 60;
const cellH = 70;
const vMargin = (screenW - cellW * cols) / (cols + 1); // ES5
var TopListView = React.createClass({
getDefaultProps(){
return{
dataArr:[],
}
},
getInitialState(){
// 创建数据源
var ds = new ListView.DataSource({rowHasChanged:(row1,row2)=>row1 !== row2});
return{
dataSource:ds.cloneWithRows(this.props.dataArr)
}
}, render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow}
contentContainerStyle={styles.contentViewStyle}
scrollEnabled={false}
/>
);
}, // 返回具体的一行
renderRow(rowData){
return(
<TouchableOpacity activeOpacity={0.8}>
<View style={styles.cellStyle}>
<Image source={{uri:rowData.image}} style={{width:52,height:52}} />
<Text style={styles.titleStyle}>{rowData.title}</Text>
</View>
</TouchableOpacity>
)
}
}); const styles = StyleSheet.create({
contentViewStyle:{
flexDirection:'row',
flexWrap:'wrap',
width:screenW,
alignItems:'center',
justifyContent:'center',
},
cellStyle:{
alignItems:'center',
justifyContent:'center',
marginTop:10,
width:cellW,
height:cellH,
marginLeft:vMargin,
},
titleStyle:{
fontSize:Platform.OS == 'ios' ? 14 : 12,
color:'gray'
},
}); // 输出
module.exports = TopListView;

4.Home.js 引入 HomeTopView 组件

/**
* 首页
*/
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'); // ES5
var Home = React.createClass({
render() {
return (
<View style={styles.container}>
{/*首页的导航条*/}
{this.renderNavBar()}
{/*首页主要内容*/}
<ScrollView>
{/*头部的View*/}
<TopView />
</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;

5.json数据

{
"data": [
[{
"title" : "美食",
"image" : "ms"
},
{
"title" : "电影",
"image" : "dy"
},
{
"title" : "酒店",
"image" : "jd"
},
{
"title" : "休闲娱乐",
"image" : "xxyl"
},
{
"title" : "外卖",
"image" : "wm"
},
{
"title" : "自助餐",
"image" : "zzc"
},
{
"title" : "KTV",
"image" : "ktv"
},
{
"title" : "火车票机票",
"image" : "hcpjp"
},
{
"title" : "丽人",
"image" : "lr"
},
{
"title" : "周边游",
"image" : "zby"
}
],
[
{
"title" : "足疗按摩",
"image" : "zlam"
},
{
"title" : "购物",
"image" : "gw"
},
{
"title" : "今日新单",
"image" : "jrxd"
},
{
"title" : "小吃快餐",
"image" : "xckc"
},
{
"title" : "生活服务",
"image" : "shfw"
},
{
"title" : "甜点饮品",
"image" : "tdyp"
},
{
"title" : "美甲",
"image" : "mj"
},
{
"title" : "景点门票",
"image" : "jdmp"
},
{
"title" : "旅游",
"image" : "ly"
},
{
"title" : "全部分类",
"image" : "qbfl"
}]
]
}

  

6.效果图

React Native商城项目实战12 - 首页头部内容的更多相关文章

  1. React Native商城项目实战15 - 首页购物中心

    1.公共的标题栏组件TitleCommonCell.js /** * 首页购物中心 */ import React, { Component } from 'react'; import { AppR ...

  2. React Native商城项目实战14 - 首页中间下部分

    1.MiddleBottomView.js /** * 首页中间下部分 */ import React, { Component } from 'react'; import { AppRegistr ...

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

    1.HomeMiddleView.js /** * 首页中间上部分内容 */ import React, { Component } from 'react'; import { AppRegistr ...

  4. React Native商城项目实战11 - 个人中心头部内容

    1.创建MineHeaderView.js /** * 个人中心头部内容 */ import React, { Component } from 'react'; import { AppRegist ...

  5. React Native商城项目实战16 - 购物中心详细页

    逻辑分析: 首页(Home)加载的购物中心组件(ShopCenter),传递url数据: ShopCenter里根据url加载购物中心详细页组件(ShopCenterDetail), ShopCent ...

  6. React Native商城项目实战05 - 设置首页的导航条

    1.Home.js /** * 首页 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Te ...

  7. React Native商城项目实战04 - 封装TabNavigator.Item的创建

    1.Main.js /** * 主页面 */ import React, { Component } from 'react'; import { StyleSheet, Text, View, Im ...

  8. React Native商城项目实战02 - 主要框架部分(tabBar)

    1.安装插件,cd到项目根目录下执行: $ npm i react-native-tab-navigator --save 2.主框架文件Main.js /** * 主页面 */ import Rea ...

  9. React Native商城项目实战03 - 包装Navigator

    1.在Home目录下新建首页详细页HomeDetail.js /** * 首页详情页 */ import React, { Component } from 'react'; import { App ...

随机推荐

  1. windows上zeal安装和使用--离线API文档

    1.官网:https://zealdocs.org/download.html#windows 2.github:https://github.com/zealdocs/zeal 3.下载:可下载安装 ...

  2. Java利用Base64编码和解码图片文件

    1.编码与解码代码如下所示: import java.awt.image.BufferedImage; import java.io.ByteArrayOutputStream; import jav ...

  3. C++ 线性表实现

    List.h #pragma once #include "targetver.h" #include <stdio.h> #include <tchar.h&g ...

  4. PHP 堆 栈 数据段 代码段 存储的理解

    对象在PHP里面和整型.浮点型一样,也是一种数据类,都是存储不同类型数据用的, 在运行的时候都要加载到内存中去用,那么对象在内存里面是怎么体现的呢? 内存从逻辑上说大体上是分为4段,栈空间段.堆空间段 ...

  5. HTTP报文结构和内容(转)

    HTTP请求报文格式就如下图所示: 1. 请求报文 一个HTTP请求报文由请求行(request line).请求头部(header).空行和请求数据4个部分组成. 大致结构是这样的: <req ...

  6. MySQL时间戳加减转日期

    一.时间戳计算前N天后N天并转化为日期,本例是将某个时间戳转为日期,并计算出与该日期前后相差7天的日期: , , , DAY)as 'after'; 输出: # before, now, after ...

  7. Qt读写Json

    Qt操作Json 1.QJsonDocument 1.详细说明 QJsonDocument类提供了读写JSON文档的方法. QJsonDocument是一个封装了完整JSON文档的类,可以从基于UTF ...

  8. iOS特殊界面旋屏设置的方法之一

    1.AppDelegate.h @property (assign, nonatomic) BOOL allowRotation; 2.AppDelegate.m #pragma mark - 自动旋 ...

  9. mpg123 - 播放 MPEG 1.0/2.0 Layer-1, -2, -3 音频文件

    语法 mpg123 [ -tscvqy01m24 ][ -b size ][ -k num ][ -n num ][ -f factor ][ -r rate ][ -g gain ][ -a dev ...

  10. 搭建jumperserver堡垒机管理万台服务器-2

    搭建jumperserver堡垒机管理万台服务器-2 1  Jumpserver堡垒机概述-部署Jumpserver运行环境 2  安装Coco组件 3  安装Web-Terminal前端-Luna组 ...