'我的'模塊主要由3個組件組合而成：MineHeaderView国裳、MineMiddleView蛔垢、CommonMyCell
頁面效果圖：
我的.png
組合的頁面源碼：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ScrollView
} from 'react-native';
// 導(dǎo)入外部的組件
var MyCell = require('./XMGCommonMyCell');
var MineMiddleView = require('./XMGMineMiddleView');
var MineHeaderView = require('./XMGMineHeaderView');
var Mine = React.createClass({
render() {
return (
<ScrollView
style={styles.scrollViewStyle}
//內(nèi)容相對于滾動視圖邊緣的坐標
//吸頂?shù)男Ч? //這兩個屬性目前只支持ios 對安卓沒有效果
contentInset = {{top:-200}}
contentOffset = {{y:200}}
>
<MineHeaderView />
<View style={{marginTop:20}}>
<MyCell
leftIconName="h_7.png"
leftTitle="我的訂單"
rightTitle="查看全部訂單"
/>
<MineMiddleView />
</View>
<View style={{marginTop:20}}>
<MyCell
leftIconName="coupon_1.png"
leftTitle="RN錢包"
rightTitle="賬戶余額：￥100"
/>
<MyCell
leftIconName="h_2.png"
leftTitle="抵用券"
rightTitle="10張"
/>
</View>
<View style={{marginTop:20}}>
<MyCell
leftIconName="h_3.png"
leftTitle="積分商城"
/>
</View>
<View style={{marginTop:20}}>
<MyCell
leftIconName="h_5.png"
leftTitle="今日推薦"
rightIconName="coupon_1.png"
/>
</View>
<View style={{marginTop:20}}>
<MyCell
leftIconName="h_10.png"
leftTitle="我要合作"
rightTitle="輕松開店枉证，招財進寶"
/>
</View>
</ScrollView>
);
}
});
var styles = StyleSheet.create({
scrollViewStyle: {
backgroundColor:'#e8e8e8'
}
});
module.exports = Mine;
MineHeaderView組件：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TouchableOpacity
} from 'react-native';
var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');
var HeaderView = React.createClass({
render() {
return (
<View style={styles.container}>
{ /*上部分*/ }
{this.renderTopView()}
{ /*下部分*/ }
{this.renderBottomView()}
</View>
);
},
// 上部分
renderTopView(){
return(
<View style={styles.topViewStyle}>
<Image source={{uri:'my_avator'}} style={styles.leftIconStyle}/>
<View style={styles.centerViewStyle}>
<Text style={{fontSize:18,color:'white',fontWeight:'bold'}}>react-native實戰(zhàn)</Text>
<Image source={require('./../Source/common_arrow_right.png')} style={{width:8,height:13,marginRight:8}} />
</View>
</View>
)
},
// 下部分
renderBottomView(){
return(
<View style={styles.bottomViewStyle}>
{this.renderBottomItem()}
</View>
);
},
renderBottomItem(){
// 數(shù)組
var itemArr = [];
//數(shù)據(jù)數(shù)組
var data = [{'number':'100', 'titile':'碼哥券'},{'number':'12', 'titile':'評價'},{'number':'50', 'titile':'收藏'},];
//遍歷創(chuàng)建組件裝入數(shù)組
for (var i = 0; i < data.length; i++) {
//取出單獨的數(shù)據(jù)
var item = data[i];
itemArr.push(
<TouchableOpacity key={i}>
<View style={styles.bottomInnerViewStyle}>
<Text style={{color:'white',fontSize:16}}>{item.number}</Text>
<Text style={{color:'white',fontSize:15,marginTop:5}}>{item.titile}</Text>
</View>
</TouchableOpacity>
);
}
//返回數(shù)組
return itemArr;
}
});
var styles = StyleSheet.create({
container: {
height:400,
backgroundColor: '#1fb5ec',
},
leftIconStyle: {
width: 60,
height: 60,
borderRadius: 30,
borderWidth: 3,
borderColor: 'rgba(0,0,0,0.2)',
},
centerViewStyle: {
flexDirection:'row',
width:width * 0.72,
},
topViewStyle: {
flexDirection: 'row',
marginTop: 250,
//設(shè)置側(cè)軸的對其方式
alignItems: 'center',
//設(shè)置主軸的對其方式
justifyContent: 'space-around'
},
bottomViewStyle: {
flexDirection:'row',
//絕對定位
position:'absolute',
bottom: 0,
},
bottomInnerViewStyle: {
width:width/3+1,
height: 50,
backgroundColor:'rgba(255,255,255,0.5)',
justifyContent:'center',
alignItems:'center',
borderRightWidth:1,
borderRightColor:'white'
}
});
module.exports = HeaderView;
MineMiddleView組件：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TouchableOpacity
} from 'react-native';
var MiddleData = require('./MiddleData.json');
var MineMiddleView = React.createClass({
render() {
return (
<View style={styles.container}>
{this.renderAllItem()}
</View>
);
},
renderAllItem(){
// 定義組件數(shù)組
var itemArr = [];
// 遍歷
for (var i = 0; i < MiddleData.length; i++) {
//取出單獨的數(shù)據(jù)
var data = MiddleData[i];
//創(chuàng)建組件裝入數(shù)組
itemArr.push(
<InnerView key={i} iconName={data.iconName} title={data.title} />
);
}
// 返回
return itemArr;
}
});
var InnerView = React.createClass({
getDefaultProps(){
return{
iconName: '',
title:''
}
},
render(){
return(
<View>
<Image source={{uri:this.props.iconName}} style={{width:25,height:25,marginLeft:10}} />
<Text style={{marginTop:8}}>{this.props.title}</Text>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
//設(shè)置主軸方向
flexDirection:'row',
alignItems: 'center',
backgroundColor: 'white',
height: 80,
justifyContent: 'space-around'
}
});
module.exports = MineMiddleView;
CommonMyCell組件：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
Image
} from 'react-native';
var MyCell = React.createClass({
getDefaultProps(){
return{
leftIconName:'',
leftTitle:'',
rightIconName:'',
rightTitle:''
}
},
render() {
return (
<TouchableOpacity activeOpacity={0.5}>
<View style={styles.container}>
{ /*左邊*/ }
<View style={styles.leftViewStyle}>
<Image source={{uri:this.props.leftIconName}} style={styles.leftImageStyle} />
<Text style={styles.leftTitleStyle}>{this.props.leftTitle}</Text>
</View>
{ /*右邊*/ }
<View style={styles.rightViewStyle}>
{this.rightSubView()}
</View>
</View>
</TouchableOpacity>
);
},
//右邊的內(nèi)容
rightSubView(){
return(
<View style={{flexDirection:'row',alignItems:'center'}}>
{this.renderRightContent()}
{ /*箭頭*/ }
<Image source={require('./../Source/common_arrow_right.png')} style={{width:8,height:13,marginRight:8, marginLeft:5}} />
</View>
)
},
// 右邊具體返回的值
renderRightContent(){
if (this.props.rightIconName.length == 0) { //不返回圖片
return(
<Text style={{color:'gray'}}>{this.props.rightTitle}</Text>
)
}else {
return(
<Image source={{uri:'h_9.png'}} style={{width:24,height:13}} />
)
}
}
});
var styles = StyleSheet.create({
container: {
// 主軸方向
flexDirection:'row',
//主軸的對其方式
justifyContent:'space-between',
//背景顏色
backgroundColor: 'white',
//設(shè)置垂直居中
alignItems: 'center',
//高度
height: 43,
//下邊框
borderBottomColor:'#e8e8e8',
borderBottomWidth:0.5
},
leftViewStyle: {
// 主軸方向
flexDirection:'row',
//側(cè)軸居中
alignItems:'center',
//左外邊距
marginLeft: 8
},
rightViewStyle: {
},
leftImageStyle: { // 左邊的圖片
width:25,
height:25,
marginRight:6,
//設(shè)置圓角
borderRadius:12
},
leftTitleStyle: {
fontSize:15
}
});
module.exports = MyCell;
