reactnative
react-native-camera

react-native-cameraを使用する

ReactNativeで作成するアプリの中でカメラを使用する場合、選択肢として上げられるreact-native-cameraモジュールをインストールして使用します。

ReactNativeプロジェクトの作成

こちらにまとめました。

react-native-cameraをインストール

パッケージインストール

$ cd /path/to/projectRoot
$ npm install react-native-camera --save
$ react-native link react-native-camera

Android用の対応

Gradleの設定

allprojects {
    repositories {
        . . .
        maven {
            url 'https://maven.google.com'
        }
        maven { url "https://jitpack.io" }
    }
}

上記のようにhttps://maven.google.comhttps://jitpack.ioを追加します。
Android Studioで上記の編集をすると出現するSync Nowボタンを押して、Gradle同期を行います。

AndroidManifest.xmlの編集

以下を追加。

AndroidManifest.xml
  <uses-permission android:name="android.permission.CAMERA" />

  # 静止画だけでなくムービも取るようなアプリなら以下も追記
  <uses-permission android:name="android.permission.RECORD_AUDIO"/>
  <uses-permission android:name="android.permission.RECORD_VIDEO"/>
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

また、こちらのページの「Q & A」の項目を参考にAndroidManifest.xmlに追記します。
私の環境では追記しないとAndroidManifest.xml:25:13-35 Errorが出ました。

iOS用の対応

info.plistの編集

以下を追加。

info.plist
    <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>
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string>Your message to user when the photo library is accessed for the first time</string>

再起動

シミュレーターで既にアプリを起動している場合は再起動しないと、更新したら画面が立ち上がらなくなると思いますので、再起動しましょう。

コードを書く

App.js
import React, { Component } from 'react';
import {
  Alert,
  Button,
  Platform,
  StyleSheet,
  Text,
  TextInput,
  View
} from 'react-native';
import Camera from 'react-native-camera';

 . . .

export default class App extends Component {
  static navigationOptions = {
    title: '撮影する',
  };
  render() {
    return (
      <View style={styles.container}>
        <Camera
          ref={(cam) => {
            this.camera = cam;
          }}
      onBarCodeRead={this.onBarCodeRead.bind(this)}
          style={styles.preview}
          aspect={Camera.constants.Aspect.fill}>
          <Text style={styles.capture} onPress={this.takePicture.bind(this)}>[CAPTURE]</Text>
        </Camera>
      </View>
    );
  }

  onBarCodeRead(e) {
    console.log(
        "Barcode Found!",
        "Type: " + e.type + "\nData: " + e.data
    );
  }

  takePicture() {
    const options = {};
    //options.location = ...
    this.camera.capture({metadata: options})
      .then((data) => console.log(data))
      .catch(err => console.error(err));
  }
}

 . . .

const styles = StyleSheet.create({
  container: {
   flex: 1,
   justifyContent: 'center',
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  capture: {
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    color: '#000',
    padding: 10,
    margin: 40
  }
})

import Camera from 'react-native-camera';Cameraをimportして使います。
コードの詳細はgithubのUsageに書いてありますのでそちらを参照してください。

iPhoneの実機で起動

手元にiPhoneしかないので、iPhoneでの実行方法だけ紹介します。

なお、iOSのシミュレーターではカメラ機能を使用できませんのでご注意ください。
Androidに関しては設定次第で使用できるようですが、今のところ私はできていません。

XCodeにApple IDを登録

XCode -> Preferences...Accountタブに移動し、Apple IDを登録します。
Apple IDを持っていない場合はAppleのページで作成しましょう。

SigningのTeamを選択

プロジェクト設定でGeneralタブに移動し、SigningのTeamを選択します。
先程登録したApple IDを選択すると良いでしょう。

スクリーンショット 2018-01-16 18.09.05.png

Code Signing Identityを設定する

プロジェクト設定でBuild Settingsタブに移動し、Code Signing Identityの項目をiOS Developerに変更します。

iPhoneを接続する

USBケーブルでMacに接続し、画面左上のデバイスを接続したiPhoneに変更します。

スクリーンショット 2018-01-16 18.12.27.png

iPhoneをパスコードで保護している場合は、うまく接続できないのでパスコードを解除した状態にしてください。

ビルド

再生マークを押してビルドします。
しばらくするとCodeSigningのため、登録したAppleIDのパスワードを聞かれるので入力します。
ビルドが成功すると、接続しているiPhoneにビルドしたアプリがインストールされます。

実行

アプリをタップすると、「信頼できないアプリなので起動できない」という旨のエラーが出ますので、設定 -> 一般 -> プロファイルとデバイスの管理から、デベロッパAppに表示されているApple IDを選択し、信頼するようにしてください。

その上でアプリアイコンをタップすると実行できます。

Image uploaded from iOS.png

ちょっと上記のコードに色々と付け加えたものになりますが、こんな感じで実行が確認できました。

まとめ

  • ReactNativeでそれっぽいカメラアプリは簡単にできそう
    • インストール時にいくつか躓くことはある