React Native商城项目实战12 - 首页头部内容

来源：互联网发布：好的彩票数据分析软件编辑：程序博客网时间：2024/04/30 21:40

这里写图片描述

上图说明：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');// ES5var 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]}>&bull;</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 = 5const cellW = Platform.OS == 'ios' ? 70 : 60;const cellH = 70;const vMargin = (screenW - cellW * cols) / (cols + 1);// ES5var 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"    }]  ]}

0 0