上图说明:HomeTopView为首页头部内容,HomeTopListView为HomeTopView子视图。
1.HomeTopView.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
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;
2.HomeTopListView.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
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;
3.用到的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"
}]
]
}