React Native商城项目实战10 - 个人中心中间内容设置

1.新建一个MineMiddleView.js，专门用于构建中间的内容 

/**
 * 个人中心中间内容设置
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity
} from 'react-native';

/**-------导入外部的json数据-------***/
var MiddleData = require('./MiddleData.json');

var MineMiddleView = React.createClass({
    render() {
        return (
            <View style={styles.container}>
                {this.renderAllItem()}
            </View>
        );
    },

    renderAllItem(){
        // 定义组件数组
        var itemArr = [];
        // 遍历
        for(var i=0; i<MiddleData.length; i++){
            // 取出单独的数据
            var data = MiddleData[i];
            // 创建组件装入数组
            itemArr.push(
                <InnerView key={i} iconName={data.iconName} title={data.title}/>
            );
        }
        // 返回
        return itemArr;
    }
});

// 里面的组件类
var InnerView = React.createClass({
    getDefaultProps(){
        return{
            iconName: '',
            title:''
        }
    },

    render(){
        return(
            <TouchableOpacity activeOpacity={0.5} onPress={()=>{alert('0')}}>
                <View style={styles.innerViewStyle}>
                    <Image source={{uri: this.props.iconName}} style={{width:40, height:30, marginBottom:3}}/>
                    <Text style={{color:'gray'}}>{this.props.title}</Text>
                </View>
            </TouchableOpacity>
        );
    }
});


const styles = StyleSheet.create({
    container: {
        // 设置主轴的方向
        flexDirection:'row',
        alignItems: 'center',
        backgroundColor: 'white',
        // 设置主轴的对齐方式
        justifyContent:'space-around'
    },

    innerViewStyle:{
        width:70,
        height:70,

        // 水平和垂直居中
        justifyContent:'center',
        alignItems:'center'
    }
});

// 输出组件类
module.exports = MineMiddleView;

 

2.Mine.js里使用该组件 

 

/**
 * 我的
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ScrollView
} from 'react-native';

/*======导入外部组件类======*/
var MyCell = require('./CommonMyCell');
var MiddleView = require('./MineMiddleView');

// ES5
var Mine = React.createClass({
    render() {
        return (
            <ScrollView style={styles.scrollViewStyle}>
                <View style={{marginTop:20}}>
                    <MyCell
                        leftIconName="collect"
                        leftTitle="我的订单"
                        rightTitle="查看全部订单"
                    />
                    <MiddleView />
                </View>
                <View style={{marginTop:20}}>
                    <MyCell
                        leftIconName="draft"
                        leftTitle="钱包"
                        rightTitle="账号余额:￥100.88"
                    />
                </View>
                <View style={{marginTop:20}}>
                    <MyCell
                        leftIconName="voucher"
                        leftTitle="抵用券"
                        rightTitle="10张"
                    />
                </View>
                <View style={{marginTop:20}}>
                    <MyCell
                        leftIconName="mall"
                        leftTitle="积分商城"
                        rightTitle=""
                    />
                </View>
                <View style={{marginTop:20}}>
                    <MyCell
                        leftIconName="recommend"
                        leftTitle="今日推荐"
                        rightTitle=""
                    />
                </View>
            </ScrollView>
        );
    }
});

const styles = StyleSheet.create({
    scrollViewStyle:{
       
    }
});

// 输出
module.exports = Mine;

 

3.效果图

 

4.MiddleData.json

[
  {"iconName":"order1", "title": "待付款"},
  {"iconName":"order2", "title": "待使用"},
  {"iconName":"order3", "title": "待评价"},
  {"iconName":"order4", "title": "退款/售后"}
]

.