https://github.com/itinance/react-native-smart-badge-ex
https://github.com/itinance/react-native-smart-badge-ex
Last synced: 10 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/itinance/react-native-smart-badge-ex
- Owner: itinance
- License: mit
- Created: 2018-02-17T13:27:21.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-08-03T08:59:34.000Z (almost 8 years ago)
- Last Synced: 2024-10-29T11:29:13.866Z (over 1 year ago)
- Language: JavaScript
- Size: 16.6 KB
- Stars: 2
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-smart-badge-ex
[](https://www.npmjs.com/package/react-native-smart-badge-ex)
[](https://www.npmjs.com/package/react-native-smart-badge-ex)
[](https://www.npmjs.com/package/react-native-smart-badge-ex)
[](https://github.com/react-native-component/react-native-smart-badge/blob/master/LICENSE)
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
![react-native-smart-badge-preview-ios][1]
![react-native-smart-badge-preview-android][4]
## Installation
```
yarn add react-native-smart-badge-ex
```
## Full Demo
see [ReactNativeComponentDemos][0]
## Usage
Install the package from npm with `yarn add react-native-smart-badge-ex`.
Then, require it from your app's JavaScript files with `import Badge from 'react-native-smart-badge-ex'`.
```js
import React, {
Component,
} from 'react'
import {
StyleSheet,
View,
Text,
} from 'react-native'
import Badge from 'react-native-smart-badge-ex'
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 (
{this.state.num1}
{this.state.num2}
{this.state.num3}
click to plus num(点击增加数字)
)
}
_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][2]
textStyle | style | Yes | | see [react-native documents][3]
minHeight | number | Yes | | determines the min-height of badge
minWidth | number | Yes | | determines the min-width of badge
[0]: https://github.com/cyqresig/ReactNativeComponentDemos
[1]: http://cyqresig.github.io/img/react-native-smart-badge-preview-ios-v1.0.7.gif
[2]: https://facebook.github.io/react-native/docs/style.html
[3]: https://facebook.github.io/react-native/docs/text.html#style
[4]: http://cyqresig.github.io/img/react-native-smart-badge-preview-android-v1.0.7.gif