weex-nuke/src/node_modules/nuke-badge/docs/advance.md

基于 Rax 、Weex 的高性能组件体系 ~~

# Badge 自动定位到右上角

- title_en: positioning to the upper right corner
- order: 0

Badge 自动定位到右上角

---
```js
<NukePlayGround>
// type: auto
  <Badge type="auto" count={5}><Text>文字内容</Text></Badge>
<NukePlayGround>
```
---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Touchable from 'nuke-touchable';
import Badge from 'nuke-badge';
import ListView from 'nuke-list-view';
import Icon from 'nuke-icon';
import Page from 'nuke-page';
import Image from 'nuke-image';
import Modal from 'nuke-modal';

const App = class NukeDemoIndex extends Component {
  constructor(props) {
    super(props);
    this.onPress = this.onPress.bind(this);
    this.renderBadge = this.renderBadge.bind(this);
  }

  onPress() {
    Modal.toast('press badge');
  }
  renderBadge() {
    return (
      <Icon
        name="delete-fill"
        type="iconfont"
        style={{
          width: 40,
          height: 40
        }}
      />
    );
  }
  render() {
    return (
      <Page title="Badge">
        <Page.Intro main="Badge-dot" sub="auto" />
        <View style={styles.containerWithMargin}>
          <Badge type="auto" count={5}>
            <Text>文字内容</Text>
          </Badge>
          <Badge type="auto" count={5}>
            <Image
              src="//gw.alicdn.com/tfs/TB1LPQYi5qAXuNjy1XdXXaYcVXa-1100-1100.png"
              style={{ width: 100, height: 100 }}
            />
          </Badge>
        </View>
        <Page.Intro main="Badge-dot" sub="auto" />
        <View style={styles.containerWithMargin}>
          <Badge type="auto" count={5} onPress={this.onPress}>
            <View style={{ width: 100, height: 100 }}>
              <Image
                src="//gw.alicdn.com/tfs/TB1LPQYi5qAXuNjy1XdXXaYcVXa-1100-1100.png"
                style={{ width: 100, height: 100 }}
              />
              <View style={styles.img}>
                <Text style={{ color: '#ffffff' }}>Nuke</Text>
              </View>
            </View>
          </Badge>
          <Badge type="auto" count={5} renderBadge={this.renderBadge} onPress={this.onPress}>
            <View style={{ width: 100, height: 100 }}>
              <Image
                src="//gw.alicdn.com/tfs/TB1LPQYi5qAXuNjy1XdXXaYcVXa-1100-1100.png"
                style={{ width: 100, height: 100 }}
              />
              <View style={styles.img}>
                <Text style={{ color: '#ffffff' }}>Nuke</Text>
              </View>
            </View>
          </Badge>
        </View>
      </Page>
    );
  }
};
const styles = {
  containerWithMargin: {
    flexDirection: 'row',
    marginTop: '20rem',
    marginBottom: '40rem',
    marginLeft: '42rem',
    marginRight: '42rem'
  },
  img: {
    position: 'absolute',
    bottom: 0,
    width: 100,
    height: 30,
    backgroundColor: '#9A9998',
    justifyContent: 'center',
    alignItems: 'center'
  }
};
render(<App />);
```