~~~
//调用组件的代码
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;
~~~
