ReactNativeでQRやBarcodeを生成する

ReactNativeでQRとBarcodeの生成をしてみます。どちらも便利なモジュールがあるようです。感謝。

準備

モジュールをインストール。

npm install react-native-qrcode --save
npm install react-native-barcode-builder --save

実装

非常に簡単です。

App.js

import React from 'react';
import { StyleSheet, Text, View, Button, Alert } from 'react-native';
import QRCode from 'react-native-qrcode';
import Barcode from 'react-native-barcode-builder';

export default class App extends React.Component {

  state = {
    text: 'hoge'
  }

  render() {

    return (
      <View style={styles.container}>
        <Text>Generate QR and barcode.</Text>
        <QRCode
          value={this.state.text}
          size={200}
          bgColor='black'
          fgColor='white'
        />
        <Barcode value={this.state.text} format="CODE128" />
        <Button
          title='QRとバーコードの内容を変更'
          onPress={() => this.setState({text: 'foo'})}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

完成イメージ

こんな感じ。