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

1.创建MineHeaderView.js

/**
 * 个人中心头部内容
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity
} from 'react-native';
 
// 导入系统类
var Dimensions = require('Dimensions');
var screenW = Dimensions.get('window').width;
 
// ES5
var HeaderView = React.createClass({
    render() {
        return (
            <View style={styles.container}>
                {this.renderTopView()}
                {this.renderBottomView()}
            </View>
        );
    },
 
    renderTopView(){
        return(
            <View style={styles.topViewStyle}>
                <Image source={{uri:'see'}} style={styles.leftIconStyle} />
                <View style={styles.conterViewStyle}>
                    <Text style={{fontSize:18,color:'white',fontWeight:'bold'}}>京东电商</Text>
                    <Image source={{uri:'avatar_vip'}} style={{width:17,height:17}} />
                </View>
                <Image source={{uri:'icon_cell_rightArrow'}} style={{width:8,height:13,marginRight:8}} />
            </View>
        )
    },
    renderBottomView(){
        return(
            <View style={styles.bottomViewStyle}>
                {this.renderBottomItem()}
            </View>
        )
    },
 
    renderBottomItem(){
        // 组件数组
        var items = [];
        // 数据
        var dataArr = [{'number':'100', 'title':'购物券'},{'number':'12', 'title':'评价'},{'number':'50', 'title':'收藏'}];
        // 遍历创建组件转入数组
        for (var i=0;i<dataArr.length;i++){
            var data = dataArr[i];
            items.push(
                <TouchableOpacity key={i}>
                    <View style={styles.bottomInnerViewStyle}>
                        <Text style={{color:'white'}}>{data.number}</Text>
                        <Text style={{color:'white'}}>{data.title}</Text>
                    </View>
                </TouchableOpacity>
            );
        }
        return items;
    },
});
 
const styles = StyleSheet.create({
    container: {
        height:200,
        backgroundColor:'rgb(255,96,0)'
    },
    topViewStyle:{
        flexDirection:'row',
        marginTop:80,
        alignItems:'center',
        justifyContent:'space-around'
    },
    leftIconStyle:{
        width:70,
        height:70,
        borderRadius:35,
        borderWidth:3,
        borderColor:'rgba(0,0,0,0.2)',
    },
    conterViewStyle:{
        flexDirection:'row',
        width:screenW * 0.6,
    },
    bottomViewStyle:{
        flexDirection:'row',
        position:'absolute',
        bottom:0,
    },
    bottomInnerViewStyle:{
        width:(screenW/3)+1,
        height:40,
        backgroundColor:'rgba(255,255,255,0.4)',
 
        justifyContent:'center',
        alignItems:'center',
 
        borderRightWidth:1,
        borderRightColor:'white'
    }
});
 
// 输出
module.exports = HeaderView;

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');
var HeaderView = require('./MineHeaderView');
 
// ES5
var Mine = React.createClass({
    render() {
        return (
            <ScrollView style={styles.scrollViewStyle}>
                <HeaderView />
                <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.效果图