mirror of
https://github.com/status-im/react-native-qrcode.git
synced 2025-02-09 00:54:09 +00:00
81 lines
1.7 KiB
Markdown
81 lines
1.7 KiB
Markdown
# react-native-qrcode
|
|
A react-native component to generate [QRcode](http://en.wikipedia.org/wiki/QR_code), not only support English.
|
|
|
|
## this module support iOS and Android
|
|
|
|
## Installation
|
|
```sh
|
|
npm install react-native-qrcode
|
|
```
|
|
## Usage
|
|
```jsx
|
|
'use strict';
|
|
|
|
import React, { Component } from 'react'
|
|
import QRCode from 'react-native-qrcode';
|
|
|
|
import {
|
|
AppRegistry,
|
|
StyleSheet,
|
|
View,
|
|
TextInput
|
|
} from 'react-native';
|
|
|
|
class HelloWorld extends Component {
|
|
state = {
|
|
text: 'http://facebook.github.io/react-native',
|
|
};
|
|
|
|
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>
|
|
);
|
|
};
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: 'white',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginTop: 80
|
|
},
|
|
|
|
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"`
|
|
|
|
<img src='qrcode.png' height = '256' width = '256'/>
|
|
|