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

/**
* 个人中心头部内容
*/
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;

/**
* 我的
*/
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;