react-native-smart-badge

A smart autofit badge for react-native apps, written in JS for cross-platform support. It works on iOS and Android.

This component is compatible with React Native 0.25 and newer.

Preview

Installation

npm install react-native-smart-badge --save

Full Demo

see ReactNativeComponentDemos

Usage

Install the button from npm with npm install react-native-smart-badge --save. Then, require it from your app's JavaScript files with import Badge from 'react-native-smart-badge'.

import React, {
  Component,
} from 'react'
import {
  StyleSheet,
  View,
  Text,
} from 'react-native'
 
import Badge from 'react-native-smart-badge'
import Button from 'react-native-smart-button'
 
export default class NumberBadge extends Component {
 
    // 构造
    constructor (props) {
        super(props);
        // 初始状态
        this.state = {
            num1: 2,
            num2: 15,
            num3: 328,
        };
    }
 
    render () {
        return (
            <View style={{marginTop: 20 + 44, flex: 1, justifyContent: 'center', alignItems: 'center', }}>
                <Badge minWidth={18} minHeight={18} textStyle={{color: '#fff',}}>
                    {this.state.num1}
                </Badge>
                <Badge textStyle={{color: '#fff',}} style={{marginTop: 10,}}>
                    {this.state.num2}
                </Badge>
                <Badge textStyle={{color: '#fff',}} style={{marginTop: 10,}}>
                    {this.state.num3}
                </Badge>
 
                <Button
                    touchableType={'blur'}
                    style={{marginTop: 10, width: 300, justifyContent: 'center', height: 40, backgroundColor: '#00AAEF', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: '#00AAEF', justifyContent: 'center',}}
                    textStyle={{fontSize: 17,  color: 'white'}}
                    onPress={this._addNum}>
                    click to plus num(点击增加数字)
                </Button>
            </View>
        )
    }
 
    _addNum = () => {
        this.setState({
            num1: this.state.num1 + 3,
            num2: this.state.num2 + 30,
            num3: this.state.num3 + 300,
        })
    }
 
}

Props

Prop	Type	Optional	Default	Description
extraPaddingHorizontal	number	Yes	10	determines the value of extra horizontal padding when the badge's width is larger than height.
style	style	Yes		see react-native documents
textStyle	style	Yes		see react-native documents
minHeight	number	Yes		determines the min-height of badge
minWidth	number	Yes		determines the min-width of badge