React Native 购物车数量红色小角标封装

来源：互联网发布：双十一成交额实时数据编辑：程序博客网时间：2024/06/11 09:53

import React, {Component} from 'react';import {    StyleSheet,    View,    Dimensions,    Text} from 'react-native';const {width, height} = Dimensions.get('window');//模块声名并导出export default class CountTag extends Component {    //属性声名    static propTypes = {        text: React.PropTypes.any    };    //默认属性    static defaultProps = {        fontSize: Constant.fontSizeXSmall,//字体大小        backgroundColor: Constant.colorTxtPrimary,//背景颜色        color: '#ffffff',//字体颜色        defaultWidth: 14,    };    //构造函数    constructor(props) {        super(props);        this.state = { //状态机变量声明        }    }    //渲染    render() {        return (            <View                style={[styles.contentStyle,this.props.style,{backgroundColor: this.props.backgroundColor,borderColor: this.props.backgroundColor,minWidth: this.props.defaultWidth,height: this.props.defaultWidth}]}>                <Text numberOfLines={1}                      style={{color: this.props.color,fontSize:this.props.fontSize,margin:3}}>{this.props.text}</Text>            </View>        );    }};const styles = StyleSheet.create({    contentStyle: {        borderRadius: 100,        position: 'absolute',        alignItems: 'center',        justifyContent: 'center',        flexDirection: 'row',    }});

使用

<CountTag style={{}}          text={0 < this.state.count < 100 ? this.state.count : "99+"  }/> // text为any类型，可以数字,可以字符串

阅读全文

0 0