React Native商城项目实战09 - 个人中心自定义cell

/**
* 个人中心自定义cell
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
Platform,
} from 'react-native';// ES5
var MyCell = React.createClass({
getDefaultProps(){
return{
leftIconName:'', // cell左侧图标
leftTitle:'', // cell左侧标题
rightIconName:'', // cell右侧图标
rightTitle:'', // cell右侧标题
}
}, render() {
return (
<TouchableOpacity onPress={()=>{alert('点击了')}}>
<View style={styles.container}>
<View style={styles.leftViewStyle}>
<Image source={{uri:this.props.leftIconName}} style={styles.leftImgStyle} />
<Text style={styles.leftTitleStyle}>{this.props.leftTitle}</Text>
</View>
<View style={styles.rightViewStyle}>
{this.rightSubView()}
</View>
</View>
</TouchableOpacity>
);
}, // cell右侧子视图
rightSubView(){
return(
<View style={{flexDirection:'row',alignItems:'center'}}>
{this.renderRightContent()}
<Image source={{uri:'icon_cell_rightArrow'}} style={{width:8, height:13, marginRight:8, marginLeft:5}} />
</View>
)
}, // cell右侧具体内容
renderRightContent(){
if(this.props.rightIconName.length == 0){ // 不返回图片
return(
<Text style={{color:'gray'}}>{this.props.rightTitle}</Text>
)
}else{
<Image source={{uri:this.props.rightIconName}} style={{width:24, height:13}} />
}
},
});const styles = StyleSheet.create({
container: {
// 主轴的方向
flexDirection:'row',
// 主轴的对齐方式
justifyContent:'space-between',
// 背景颜色
backgroundColor:'white',
// 垂直居中
alignItems:'center',
// 高度
height:Platform.OS == 'ios' ? 40 : 36, // 下边框
borderBottomColor:'#e8e8e8',
borderBottomWidth:0.5
},
leftViewStyle:{
// 主轴的方向
flexDirection:'row',
// 侧轴居中
alignItems:'center',
// 左外边距
marginLeft:8
}, rightViewStyle:{ }, leftImgStyle:{ // 左边的图片
width:24,
height:24,
marginRight:6,
// 圆角
borderRadius:12
}, leftTitleStyle:{
fontSize:16
}
});// 输出
module.exports = MyCell;

/**
* 我的
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ScrollView
} from 'react-native';/*======导入外部组件类======*/
var MyCell = require('./CommonMyCell');// ES5
var Mine = React.createClass({
render() {
return (
<ScrollView>
<View style={{marginTop:20}}>
<MyCell
leftIconName="draft"
leftTitle="钱包"
rightTitle="账户余额:￥100.88"
/>
</View>
</ScrollView>
);
}
});const styles = StyleSheet.create({});// 输出
module.exports = Mine;