README.md
This commit is contained in:
parent
fc20fb50bd
commit
e118f2e327
73
README.md
73
README.md
|
@ -1 +1,72 @@
|
||||||
##react-native-qrcode
|
#react-native-qrcode
|
||||||
|
A React-native component to generate [QRcode](http://en.wikipedia.org/wiki/QR_code).
|
||||||
|
##Installation
|
||||||
|
```sh
|
||||||
|
npm install react-native-qrcode
|
||||||
|
```
|
||||||
|
##Usage
|
||||||
|
```jsx
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var React = require('react-native');
|
||||||
|
var QRCode = require('react-native-qrcode');
|
||||||
|
var {
|
||||||
|
AppRegistry,
|
||||||
|
StyleSheet,
|
||||||
|
View,
|
||||||
|
TextInput
|
||||||
|
} = React;
|
||||||
|
|
||||||
|
var helloworld = React.createClass({
|
||||||
|
getInitialState: function() {
|
||||||
|
return {
|
||||||
|
text: 'http://facebook.github.io/react-native/',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
render: function() {
|
||||||
|
return (
|
||||||
|
<View style={{marginTop: 30}}>
|
||||||
|
<TextInput
|
||||||
|
style={styles.input}
|
||||||
|
onChangeText={(text) => this.setState({text: text})}
|
||||||
|
/>
|
||||||
|
<QRCode
|
||||||
|
value={this.state.text}
|
||||||
|
size={200}
|
||||||
|
bgColor='purple'
|
||||||
|
fgColor='white'/>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: 'white',
|
||||||
|
},
|
||||||
|
|
||||||
|
input: {
|
||||||
|
height: 40,
|
||||||
|
borderColor: 'gray',
|
||||||
|
borderWidth: 1,
|
||||||
|
margin: 10,
|
||||||
|
borderRadius: 5,
|
||||||
|
padding: 5,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
AppRegistry.registerComponent('helloworld', () => helloworld);
|
||||||
|
|
||||||
|
module.exports = helloworld;
|
||||||
|
```
|
||||||
|
## Available Props
|
||||||
|
|
||||||
|
prop | type | default value
|
||||||
|
----------|----------------------|--------------
|
||||||
|
`value` | `string` | `http://facebook.github.io/react-native/`
|
||||||
|
`size` | `number` | `128`
|
||||||
|
`bgColor` | `string` (CSS color) | `"#FFFFFF"`
|
||||||
|
`fgColor` | `string` (CSS color) | `"#000000"`
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -3,18 +3,15 @@
|
||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
"description": "react-native qrocode generator",
|
"description": "react-native qrocode generator",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
|
||||||
},
|
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git+ssh://git@github.com/cssivision/react-native-qrcode.git"
|
"url": "https://github.com/cssivision/react-native-qrcode.git"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"react-native",
|
"react-native",
|
||||||
"qrcode"
|
"qrcode"
|
||||||
],
|
],
|
||||||
"author": "sivision.chen",
|
"author": "sivision.chen <cssivision@gmail.com>",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/cssivision/react-native-qrcode/issues"
|
"url": "https://github.com/cssivision/react-native-qrcode/issues"
|
||||||
|
|
Loading…
Reference in New Issue