~~~
//調用組件的代碼
import MineCell from './mineCell';
<View style={styles.hMargin}>
<MineCell leftImgName='draft' title='我的錢包' rightText='賬戶余額￥100' />
<MineCell leftImgName='like' title='抵用卷' rightText='0' />
</View>
<View style={styles.hMargin}>
<MineCell leftImgName='card' title='積分商城' rightImg='me_new' />
</View>
<View style={styles.hMargin}>
<MineCell leftImgName='pay' title='今日推薦' rightText='0' />
</View>
<View style={styles.hMargin}>
<MineCell leftImgName='new_friend' title='我要合作' rightText='輕松開店,招財進寶' />
</View>
~~~
~~~
//封裝的cell組件
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
PixelRatio
} from 'react-native';
class mineCell extends Component {
//
constructor(props){
super(props);
this.state={
swichVal:false
}
}
render() {
return (
<TouchableOpacity activeOpacity={0.5}>
<View style={styles.cellView}>
<View style={styles.innerView}>
<Image style={styles.leftImg} source={{uri:this.props.leftImgName}} />
<Text style={styles.titleStyle}>
{this.props.title}
</Text>
</View>
{this.rightView()}
</View>
</TouchableOpacity>
);
}
// 渲染右側的視圖
rightView() {
if(this.props.isSwich){
//當isSwich為true，返回Swich組件
return (<Switch value={this.state.switchVal==true} onValueChange={()=>{this.setState({swichVal:!this.state.switchVal})}} />);
}else{
if(this.props.rightText.length>0){
//當rightText有值的時候
return (
<View style={styles.innerView}>
<Text style={styles.rightTextStyle}>{this.props.rightText}</Text>
<Image style={styles.arrowStyle} source={{uri:'icon_cell_rightarrow'}} />
</View>
);
}else{
//當rightImg有值的時候
if(this.props.rightImg.length>0){
return (
<View style={styles.innerView}>
<Image style={styles.rightImg} source={{uri:this.props.rightImg}} />
<Image style={styles.arrowStyle} source={{uri:'icon_cell_rightarrow'}} />
</View>
);
}else{
return (
<Image style={styles.arrowStyle} source={{uri:'icon_cell_rightarrow'}} />
);
}
}
}
}
}
// 定義組件的屬性
mineCell.defaultProps={
title:'',//標題
rightText:'',//右側文字
leftImgName:'',//左邊圖片
rightImg:''//右邊小圖片
}
const styles = StyleSheet.create({
cellView:{
height:44,
flexDirection:'row',
alignItems:'center',
justifyContent:'space-between',
backgroundColor:'#fff',
borderBottomWidth:1/PixelRatio.get(),
borderBottomColor:'#dddddd'
},
innerView:{
height:44,
flexDirection:'row',
alignItems:'center'
},
leftImg:{
width:24,
height:24,
borderRadius:48,
marginLeft:10
},
titleStyle:{
marginLeft:10
},
arrowStyle:{
width:8,
height:13,
marginRight:10
},
rightTextStyle:{
marginRight:10
},
rightImg:{
width:24,
height:13,
marginRight:10
}
});
module.exports=mineCell;
~~~
