2015-12-26 11:44:30 +08:00
|
|
|
### this module work for iOS and Android
|
2015-11-21 21:54:30 +08:00
|
|
|
|
2015-11-21 22:07:38 +08:00
|
|
|
# react-native-qrcode
|
2015-11-29 16:45:33 +08:00
|
|
|
A React-native component to generate [QRcode](http://en.wikipedia.org/wiki/QR_code), also support chinese.
|
2015-11-21 21:54:30 +08:00
|
|
|
|
2015-11-21 22:07:38 +08:00
|
|
|
## Installation
|
2015-11-21 17:15:46 +08:00
|
|
|
```sh
|
|
|
|
npm install react-native-qrcode
|
|
|
|
```
|
2015-11-21 22:07:38 +08:00
|
|
|
## Usage
|
2015-11-21 17:15:46 +08:00
|
|
|
```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"`
|
|
|
|
|
2015-11-21 17:33:51 +08:00
|
|
|
<img src='qrcode.png' height = '256' width = '256'/>
|
2015-11-21 17:15:46 +08:00
|
|
|
|