81 lines
1.8 KiB
Markdown
Raw Normal View History

2015-11-21 22:07:38 +08:00
# react-native-qrcode
2016-02-12 17:29:36 +08:00
A react-native component to generate [QRcode](http://en.wikipedia.org/wiki/QR_code), not only support English.
2015-11-21 22:07:38 +08:00
## Installation
2015-11-21 17:15:46 +08:00
```sh
npm install react-native-qrcode --save
2015-11-21 17:15:46 +08:00
```
2015-11-21 22:07:38 +08:00
## Usage
2015-11-21 17:15:46 +08:00
```jsx
'use strict';
2016-11-11 11:40:47 +08:00
import React, { Component } from 'react'
import QRCode from 'react-native-qrcode';
import {
2015-11-21 17:15:46 +08:00
AppRegistry,
StyleSheet,
View,
TextInput
2016-11-11 11:40:47 +08:00
} from 'react-native';
2015-11-21 17:15:46 +08:00
2016-11-11 11:40:47 +08:00
class HelloWorld extends Component {
state = {
2016-11-11 11:49:05 +08:00
text: 'http://facebook.github.io/react-native/',
2016-11-11 11:40:47 +08:00
};
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.input}
onChangeText={(text) => this.setState({text: text})}
value={this.state.text}
/>
<QRCode
value={this.state.text}
size={200}
bgColor='purple'
fgColor='white'/>
</View>
);
};
}
2015-11-21 17:15:46 +08:00
2016-11-11 11:40:47 +08:00
const styles = StyleSheet.create({
2015-11-21 17:15:46 +08:00
container: {
flex: 1,
backgroundColor: 'white',
2015-12-31 12:58:12 +08:00
alignItems: 'center',
2016-11-12 23:29:49 +08:00
justifyContent: 'center'
2015-11-21 17:15:46 +08:00
},
input: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
margin: 10,
borderRadius: 5,
padding: 5,
}
});
2016-11-11 11:40:47 +08:00
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
2015-11-21 17:15:46 +08:00
2016-11-11 11:40:47 +08:00
module.exports = HelloWorld;
2015-11-21 17:15:46 +08:00
```
## Available Props
prop | type | default value
----------|----------------------|--------------
`value` | `string` | `http://facebook.github.io/react-native/`
`size` | `number` | `128`
2017-04-04 14:36:47 +08:00
`bgColor` | `string` (CSS color) | `"#000"`
`fgColor` | `string` (CSS color) | `"#FFF"`
2015-11-21 17:15:46 +08:00
2015-11-21 17:33:51 +08:00
<img src='qrcode.png' height = '256' width = '256'/>
2015-11-21 17:15:46 +08:00
2017-04-08 18:49:08 +08:00
# Licenses
All source code is licensed under the [MIT License](https://github.com/cssivision/react-native-qrcode/blob/master/LICENSE).