react-native-qrcode-scannerを試す


2018年7月8日
Mac


[moaazsidat/react-native-qrcode-scanner: A QR code scanner component for React Native.](https://github.com/moaazsidat/react-native-qrcode-scanner)


## プロジェクト作成


```
react-native init QRCodeApp
```


RNは現状最新版の0.56.0がインストールされました。

```
  "dependencies": {
    "react": "16.4.1",
    "react-native": "0.56.0"
  },
```



## react-native-camera インストール
react-native-qrcode-scannerに必要なreact-native-cameraをインストールします。
以下を参考に入れます。
[react-native-cameraを試す - Qiita](https://qiita.com/sugasaki/items/64111a0c316bfbb51e3f)


```
npm install react-native-camera --save
react-native link react-native-camera

```

## react-native-qrcode-scanner インストール

以下コマンドでインストールします。

```
npm install react-native-qrcode-scanner --save

react-native link react-native-qrcode-scanner
react-native link react-native-permissions

```


## plist


QRCodeApp/ios/QRCodeApp/Info.plist を開いて編集します。

ファイル末尾、</dict>の上に以下を追加します。
NSPhotoLibraryAddUsageDescriptionはカメラからアルバムにアクセスする際に必須になったようです。

```

<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>

<!-- Include this only if you are planning to use the camera roll -->
<key>NSPhotoLibraryUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>

<!-- Include this only if you are planning to use the microphone for video recording -->
<key>NSMicrophoneUsageDescription</key>
<string>Your message to user when the microphone is accessed for the first time</string>

<!-- Include this only if you are planning to use the camera roll -->
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>

```


## App.jsnの編集

サンプルを参考にApp.jsを編集
[react-native-qrcode-scanner/default.js at master · moaazsidat/react-native-qrcode-scanner](https://github.com/moaazsidat/react-native-qrcode-scanner/blob/master/examples/default.js)


```js:App.js

import React, { Component } from 'react';

import {
  AppRegistry,
  StyleSheet,
  Text,
  TouchableOpacity,
  Linking,
} from 'react-native';

import QRCodeScanner from 'react-native-qrcode-scanner';



export default class App extends Component<Props> {
  onSuccess(e) {
    Linking
      .openURL(e.data)
      .catch(err => console.error('An error occured', err));
  }

  render() {
    return (
      <QRCodeScanner
        onRead={this.onSuccess.bind(this)}
        topContent={
          <Text style={styles.centerText}>
            Go to <Text style={styles.textBold}>wikipedia.org/wiki/QR_code</Text> on your computer and scan the QR code.
          </Text>
        }
        bottomContent={
          <TouchableOpacity style={styles.buttonTouchable}>
            <Text style={styles.buttonText}>OK. Got it!</Text>
          </TouchableOpacity>
        }
      />
    );
  }
}

const styles = StyleSheet.create({
  centerText: {
    flex: 1,
    fontSize: 18,
    padding: 32,
    color: '#777',
  },
  textBold: {
    fontWeight: '500',
    color: '#000',
  },
  buttonText: {
    fontSize: 21,
    color: 'rgb(0,122,255)',
  },
  buttonTouchable: {
    padding: 16,
  },
});
```


## test

ここで一度実行してみる

```
react-native run-ios
```

シミュレータで以下のように表示されればOK
シミュレータではカメラが使えないので真っ黒になります。

<img src="https://qiita-image-store.s3.amazonaws.com/0/49910/a573ebc3-1147-6050-1483-cb932fb0580f.png" width=300px /> <img src="https://qiita-image-store.s3.amazonaws.com/0/49910/d9772a03-43eb-e38f-fb79-9c8e4467640d.png" width=300px />




## 実機テスト

以下にそって実機テストを行う。

[React-Native を実機で動かす - Qiita](https://qiita.com/sugasaki/items/45e91a6b766690e1e8bf)

実機ではカメラが起動します。

<img src="https://qiita-image-store.s3.amazonaws.com/0/49910/4865ad2f-8a4d-6288-80dc-e042e3b52d9a.png" width=300px /> <img src="https://qiita-image-store.s3.amazonaws.com/0/49910/82e3f115-f6bd-d6e5-ab87-00ccd4a4e3a0.png" width=300px />


### 再アクティブ

サンプルコードのままでは一度QRコードを読み取るとそれ以降は読み込まないので、
再アクティブ化の処理が必要になります。

```
<TouchableOpacity style={styles.buttonTouchable}>
	<Text style={styles.buttonText}>OK. Got it!</Text>
</TouchableOpacity>
```

onPressイベントを追加します。

```
<TouchableOpacity style={styles.buttonTouchable} onPress={() => {this.scanner.reactivate()}} >
	<Text style={styles.buttonText}>再アクティブ</Text>
</TouchableOpacity>

```

再アクティブボタンを押す事で何度でもQRコードの読み込みが可能になりました。
<img src="https://qiita-image-store.s3.amazonaws.com/0/49910/145129dd-121e-2b56-d1ee-939323bf2b45.png" width=300px />



## 外に持ち出して実機テスト

上記までのはデバッグ環境でiPhoneとMacとが同一ネットワークに無いと動かない。
外に持ち出してテストしたい時などはProductionとしてアプリを動作するように設定する。

リリースモードでビルドします。


> メニューからProduct → Scheme → Edit Schemeでビルド切り替え画面が出てきます。
> Build ConfigurationをReleaseにします。


## ソース
ここまでのソースは以下に保存しました。
[sugasaki/react-native-qrcode-scanner-test](https://github.com/sugasaki/react-native-qrcode-scanner-test)


react-native用の.gitignoreは以下を使った。
[https://www.gitignore.io/api/reactnative](https://www.gitignore.io/api/reactnative)