hcmobile-sdk/components/badge/BadgeDemo.js

mobile-sdk

//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Badge from './index';
import Button from '../button/index';

// create a component
class BadgeDemo extends Component {
    
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            num1: 2,
            num2: 13,
            num3: 328,
        };
    }
    
    render() {
        return (
            <View style={{marginTop: 20 + 44, flex: 1, justifyContent: 'center', alignItems: 'center', }}>
                <Badge 
                    minWidth={10} 
                    minHeight={10} 
                    textStyle={{color: '#fff',fontSize: 10,}}
                >
                    {this.state.num1}
                </Badge>
                <Badge 
                    textStyle={{color: '#fff',}} 
                    style={{marginTop: 10,backgroundColor:'blue'}}
                >
                    {this.state.num2}
                </Badge>
                <Badge textStyle={{color: '#fff',}} style={{marginTop: 10,}}>
                    {this.state.num3}
                </Badge>

                <Button
                    text = 'click to plus num(点击增加数字)'
                    buttonStyle = {{marginTop:20,}}
                    onPress = {() => {
                        this.setState({
                            num1: this.state.num1 + 3,
                            num2: this.state.num2 + 30,
                            num3: this.state.num3 + 300,
                        });
                    }}
                />
            </View>
        );
    }
}

//make this component available to the app
export default BadgeDemo;