RN(Expo)でQR表示・・・（2020年1月更新）

8777 ワード
expo reactnative reactnative テキストリンク

常に事情が変わるので随時更新する記事にします。

2020年1月8日追記

以前書いた時はiOS, Androidの両方で動くライブラリがなくて困った。
ダメ元で、

react-native-custom-qr-codes-expo

というのを試したらiOS, Androidで動いた。

インストール

react-native-svgが必要（たぶん私がexpo環境だから）。

npm install --save react-native-custom-qr-codes-expo react-native-svg

簡単な実装

ロゴとかも入れられる。が、グラデーション機能とかはうまく動かなかった。。。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { QRCode } from 'react-native-custom-qr-codes-expo';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <QRCode
        content="12345"
        logo={require('./assets/logo.png')}
        logoSize={50}
        color="#aaa"
        size={200}
      />
    </View>
  );
}

以下オリジナル

RNでQRを表示する方法は以前にも書いたのですが、どうやらそのライブラリは最新のiOS環境では動作しなくなったようです（メンテもしないそうです）。

で、react-native-qrcode-svgというモジュールがあったのでそちらを利用し無事表示できたのですが、それはAndroid環境では動作しないようでした（数日前issueが上がっていたので、最近動かなくなったのかもしれません）。

で、幸か不幸か、以前のモジュールreact-native-qrcodeはAndroid環境でも動作するようなので、Platformにより分岐させてモジュールを使い分けるしかないかなと。。。

以下、テストコード。

JSX内で分岐させるために即時関数を利用しています。

App.js
import React from 'react';
import { StyleSheet, Text, View, Platform } from 'react-native';
import QRCodeSVG from 'react-native-qrcode-svg'; //iosで動く
import QRCode from 'react-native-qrcode';//androidで動く

export default class App extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                {
                    (() => {
                        if (Platform.OS === 'ios') {
                            return (
                                <QRCodeSVG
                                    value="12345"
                                />
                            );
                        } else {
                            return (
                                <QRCode
                                    value="12345"
                                />
                            );
                        }
                    })()
                }
            </View>
        );
    }
}

参考

BufferReaderとBufferInputStreamの違いと使い方
ServiceStack.OrmLiteノート10-group havingページングorderbyなど