react-native 封装首页图标组件

先上效果图：

QQ20170629-111706.png

这是之前项目中封装的首页图标组件，现在项目改版，所以这个组件便被舍弃了，在此记录下，以免忘记。

一、封装组件

HomeCell.js

/**
 * Created by sybil052 on 2017/3/28.
 * 首页grid网格布局
 */
import React, {Component, PropTypes} from 'react';
import {
    View,
    StyleSheet,
    Text,
    TouchableOpacity,
} from 'react-native';
import {
    WHITE_COLOR,
    RED_TEXT_COLOR,
} from '../../constants/staticColor';

const styles = StyleSheet.create({
    badgeIcon: {
        backgroundColor: RED_TEXT_COLOR,
        width: 18,
        height: 18,
        alignSelf: 'center',
        borderRadius: 9,
        alignItems: 'center',
        zIndex: 3,
        justifyContent: 'center',
        position: 'relative',
        top: 6,
        right: -12,
    },
    badgeNull: {
        width: 18,
        height: 18,
        alignSelf: 'center',
        borderRadius: 9,
        alignItems: 'center',
        zIndex: 3,
        justifyContent: 'center',
        position: 'relative',
        top: 6,
        right: -12,
    },
    container: {
        width: 80,
        height: 80,
        borderRadius: 40,
    },
});
export default class HomeCell extends Component {

    // 定义相关属性类型
    static propTypes = {
        badgeStyle: View.propTypes.style,
        backgroundColor: View.propTypes.style,
        title: PropTypes.string.isRequired,
        padding: PropTypes.number,
        renderImage: PropTypes.func,
        clickAction: PropTypes.func,
        badgeText: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    };

    // render外部传递的组件
    renderImage(props) {
        if (this.props.renderImage) {
            // 这里将引用外部renderImage方法
            return React.cloneElement(this.props.renderImage(), props);
        }
        return null;
    }

    render() {
        const {title, renderImage, padding, badgeText, clickAction} = this.props;
        return (
            <TouchableOpacity
                style={[{
                    paddingTop: 40,
                    paddingBottom: 40,
                    paddingLeft: 54,
                    paddingRight: 54,
                    alignItems: 'center',
                    justifyContent: 'center',
                    backgroundColor: WHITE_COLOR,
                }, this.props.badgeStyle]}
                onPress={() => {
                    clickAction();
                }} activeOpacity={0.6}
            >
                <View style={[styles.container, this.props.backgroundColor]}>
                    <View style={{alignSelf: 'center'}}>
                        {
                            badgeText ?
                                <View style={styles.badgeIcon}>
                                    <Text
                                        style={{
                                            color: WHITE_COLOR,
                                            fontSize: 11,
                                            backgroundColor: 'transparent',
                                        }}
                                    >{badgeText}</Text></View>
                                : <View style={styles.badgeNull} />
                        }

                        {this.renderImage(this.props)}
                    </View>
                    <Text
                        style={{
                            marginTop: padding,
                            fontSize: 15,
                            color: WHITE_COLOR,
                            backgroundColor: 'transparent',
                            alignSelf: 'center',
                        }}
                    >{title}</Text>
                </View>
            </TouchableOpacity>
        );
    }
}

二、调用

home.js

    render() {
          const {homePageState} = this.props;
          return (
               <View style={{flexDirection: 'row', marginTop: 10}}>
                    <HomeCell
                        title="接单"// 文字
                        padding={3}// 文字与图片间距
                        badgeStyle={{flex: 1}}
                        backgroundColor={{backgroundColor: BLUE_CIRCLE_COLOR}}// 大圆背景色
                        badgeText={homePageState == null ? 0 : homePageState.pendingCount}// 消息提示
                        renderImage={() => <Text style={styles.icon}>&#xe60d;</Text>}// 图标
                        clickAction={() => { // 点击事件}}
                    />
                    <View style={styles.line}/>
                    <HomeCell
                        title="发运"
                        padding={2}
                        badgeStyle={{flex: 1}}
                        backgroundColor={{backgroundColor: ORANGE_CIRCLE_COLOR}}
                        badgeText={homePageState == null ? 0 : homePageState.notYetShipmentCount}
                        renderImage={() => <Text style={styles.icon}>&#xe611;</Text>}
                        clickAction={() => {}}
                    />
                </View>
            );
      }

 ...
const styles = StyleSheet.create({
    line: {
        backgroundColor: DEVIDE_LINE_COLOR,
        width: 0.5,
    },
    icon: {
        fontFamily: 'iconfont',
        fontSize: 23,
        color: WHITE_COLOR,
    },
});