react-native-smart-corner-label
A smart corner label for React Native app, 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-corner-label --save
Full Demo
Usage
Install the package from npm with npm install react-native-smart-corner-label --save
.
Then, require it from your app's JavaScript files with import CornerLabel from 'react-native-smart-corner-label'
.
{ return <View style=flex: 1 justifyContent: 'center' alignItems: 'center' backgroundColor: '#fff'> <View style= overflow: 'hidden' //don't forget to set this justifyContent: 'center' alignItems: 'center' height: 100 width: 100 borderWidth: StyleSheethairlineWidth borderColor: '#eee' margin: 5> <Image source=image_shopping style=width: 30 height: 30 marginHorizontal: 10 marginBottom: 10/> <Text>shopping</Text> <CornerLabel cornerRadius=36 style=backgroundColor: 'red' textStyle=fontSize: 10 color: '#fff' > New </CornerLabel> </View> <View style= overflow: 'hidden' //don't forget to set this justifyContent: 'center' alignItems: 'center' height: 100 width: 100 borderWidth: StyleSheethairlineWidth borderColor: '#eee' margin: 5> <Image source=image_shopping style=width: 30 height: 30 marginHorizontal: 10 marginBottom: 10/> <Text>购物</Text> <CornerLabel alignment='right' cornerRadius=36 style=backgroundColor: 'red' textStyle=fontSize: 12 color: '#fff' > 新 </CornerLabel> </View> <View style= overflow: 'hidden' //don't forget to set this justifyContent: 'center' alignItems: 'center' height: 100 width: 100 borderWidth: StyleSheethairlineWidth borderColor: '#eee' margin: 5> <Image source=image_shopping style=width: 30 height: 30 marginHorizontal: 10 marginBottom: 10/> <Text>shopping</Text> <CornerLabel cornerRadius=54 style=backgroundColor: 'red' height: 24 textStyle=color: '#fff' > 30% off </CornerLabel> </View> <View style= overflow: 'hidden' //don't forget to set this justifyContent: 'center' alignItems: 'center' height: 100 width: 100 borderWidth: StyleSheethairlineWidth borderColor: '#eee' margin: 5> <Image source=image_shopping style=width: 30 height: 30 marginHorizontal: 10 marginBottom: 10/> <Text>购物</Text> <CornerLabel cornerRadius=54 alignment='right' style=backgroundColor: 'red' height: 24 textStyle=color: '#fff' fontSize: 12> 7折优惠 </CornerLabel> </View> </View> }
Props
Prop | Type | Optional | Default | Description |
---|---|---|---|---|
alignment | string | Yes | 'left' | determines the position of the corner label(keep left or right). |
cornerRadius | number | No | determines the value of the corner's radius. | |
style | style | Yes | see react-native documents | |
textStyle | style | Yes | see react-native documents |