角标

Badge 角标

角标是与元素关联的项目的数字指示符。徽章可以通知您有新的或未读的消息或通知。这些可以非常有效地提醒用户应用程序上的新内容。

import React, { Component } from 'react';
import { Container, Header, Content, Badge, Text, Icon } from 'native-base';
export default class BadgeExample extends Component {
  render() {
    return (
      <Container>
        <Header />
        <Content>
          <Badge>
            <Text>2</Text>
          </Badge>
          <Badge primary>
            <Text>2</Text>
          </Badge>
          <Badge success>
            <Text>2</Text>
          </Badge>
          <Badge info>
            <Text>2</Text>
          </Badge>
          <Badge warning>
            <Text>2</Text>
          </Badge>
          <Badge danger>
            <Text>2</Text>
          </Badge>
          <Badge primary>
          <Icon name="star" style={{ fontSize: 15, color: "#fff", lineHeight: 20 }}/>
          </Badge>
          <Badge style={{ backgroundColor: 'black' }}>
            <Text style={{ color: 'white' }}>1866</Text>
          </Badge>
        </Content>
      </Container>
    );
  }
}

属性:

属性默认值选项描述
primary-booleanAdd a blue background color to your component
success-booleanAdd a green background color to your component
info-booleanAdd a light blue background color to your component as shown
warning-booleanAdd a yellow warning background color to your component
danger-booleanAdd a red background color to your component
← PreviousNext →