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

上图说明：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]}>&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 = 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"
    }]
  ]
}