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 (
             {
                    clickAction();
                }} activeOpacity={0.6}
            >
                
                    
                        {
                            badgeText ?
                                
                                    {badgeText}
                                : 
                        }

                        {this.renderImage(this.props)}
                    
                    {title}
                
            
        );
    }
}

二、调用

home.js

    render() {
          const {homePageState} = this.props;
          return (
               
                     }// 图标
                        clickAction={() => { // 点击事件}}
                    />
                    
                     }
                        clickAction={() => {}}
                    />
                
            );
      }

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