Edited at

react-native-cameraを使用する

More than 1 year has passed since last update.

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でそれっぽいカメラアプリは簡単にできそう


    • インストール時にいくつか躓くことはある