React Native TableViewCell封装

来源：互联网发布：淘宝专业版免费的模板编辑：程序博客网时间：2024/06/04 18:54

iOS上TableViewCell在开发中很是常见，所以对cell的封装很有必要。

import React, { Component } from 'react';import {    StyleSheet,    View,    Image,    Dimensions,    TouchableNativeFeedback,    TouchableOpacity,    Platform,    Text} from 'react-native';const { width, height } = Dimensions.get('window');import ARR_ICON from '../img/next.png';const MARGIN_WIDTH = 10;//模块声名并导出export default class TableCell extends Component {    //属性声名    static propTypes = {        onClick: React.PropTypes.func,        title: React.PropTypes.string.isRequired,        icon: React.PropTypes.element,        extra: React.PropTypes.any,        extraTextStyle: React.PropTypes.any,        cellStyle: React.PropTypes.any,        underLine: React.PropTypes.number,        cellHeight: React.PropTypes.number,        rightIcon: React.PropTypes.element,        showArrow: React.PropTypes.bool,        enbleClick: React.PropTypes.bool    };    //默认属性    static defaultProps = {        underLine: 0,        cellStyle: null,        extra: null,        extraTextStyle: null,        title: '标题',        icon: null,        onClick: () => {        },        cellHeight: 44,        showArrow: true,        enbleClick: true    };    //构造函数    constructor(props) {        super(props);        this.state = { //状态机变量声明        }    }    //渲染    render() {        const Touch = Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;        let cellHeight = this.props.cellHeight;        cellHeight = Constant.scale(this.props.cellHeight)        let LINE_STYLE = styles.lineAll;        switch (this.props.underLine) {            case 1:                LINE_STYLE = styles.lineMargin;                break;            case 2:                LINE_STYLE = styles.lineNull;                break;            default:                break;        }        return (            <Touch                {...this.props}                activeOpacity={this.props.enbleClick ? 0.2 : 1}                onPress={this.props.onClick}            >                <View style={[{                    width: width,                    height: cellHeight,                    paddingLeft: MARGIN_WIDTH,                    paddingRight: MARGIN_WIDTH,                    backgroundColor: 'white',                    flexDirection: 'row',                    alignItems: 'center',                    justifyContent: 'space-between',                },                this.props.cellStyle                ]}>                    <View style={styles.titleView}>                        {this.props.icon && <View style={{ marginRight: 5 }}>{this.props.icon}</View>}                        <Text style={styles.titleText}>{this.props.title}</Text>                    </View>                    <View style={styles.titleView}>                        {this.props.extra && typeof this.props.extra ==='string'?<Text style={[styles.extraText, this.props.extraTextStyle]}>{this.props.extra}</Text>:this.props.extra}                        {this.props.rightIcon ? this.props.rightIcon : this.props.showArrow ? <Image source={ARR_ICON} />  : null }                    </View>                    <View style={LINE_STYLE} />                </View>            </Touch>        )    }};const styles = StyleSheet.create({    listItemContainer: {        flexDirection: 'row',        alignItems: 'center',    },    listItemIcon: {        marginRight: MARGIN_WIDTH,        width: 26,        height: 26,    },    listItemTitle: {        color: 'black'    },    titleText: {        fontSize: 14,        color: "#333333"    },    extraText: {        fontSize: 14,        color: "#777777",        marginRight: 5    },    titleView: {        flexDirection: 'row',        alignItems: 'center',        justifyContent: 'center',    },    lineAll: {        width: width,        height: StyleSheet.hairlineWidth,        backgroundColor: '#ddd8d8',        position: 'absolute',        bottom: StyleSheet.hairlineWidth,        left: 0    },    lineMargin: {        width: width,        height: StyleSheet.hairlineWidth,        backgroundColor: '#ddd8d8',        position: 'absolute',        bottom: StyleSheet.hairlineWidth,        left: MARGIN_WIDTH    },    lineNull: {        width: width,        height: 0,        position: 'absolute',        bottom: 0,        left: 0    }});

使用：

 <TableCell      underLine={1} // 0下划线全通, 1下划线有left间距 2没有下划线      cellStyle={{ backgroundColor: 'white',marginTop:64 }} // cell的样式      title="设置" // 左边title      extra={"点击查看"} // 右边title      onClick={() => { }} // cell点击事件      enbleClick={true} // 是否能够点击,默认为true      showArrow={false} // 展示箭头, 默认为true, 如果为rightIcon有值，默认不展示箭头      rightIcon={<Image      style={{ width: 20, height: 20, }} // 右边icon 默认为箭头      source={require('../img/mine/ic_bind_qq.png')} />}      icon={<Image      style={{ width: 20, height: 20, }} // 左边icon      source={require('../img/mine/ic_bind_qq.png')}/>}    />

效果图：

这里写图片描述

阅读全文

0 0