react-native|react-native 封装首页图标组件 react-native封装首页图标组件

先上效果图：

文章图片
QQ20170629-111706.png 【react-native|react-native 封装首页图标组件】这是之前项目中封装的首页图标组件，现在项目改版，所以这个组件便被舍弃了，在此记录下，以免忘记。
一、封装组件 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, }, });