react-native-image-picker

概要

下記のようにReact Nativeでカメラを使って写真を取ったり、カメラロールから保存された写真にアクセスすることができます。

iOS	Android

[写真: react-native-image-pickerの公式サイト]

このような機能を実現するため、react-native-image-pickerのライブラリを使う方法について説明します。

公式サイト: react-native-image-picker

ここで紹介する内容はGithubでソースコードを確認することができます。

Github: react-native-image-picker-example

ここで紹介する例題ソースコードは下記の内容が適用された状態です。

react-native-image-pickerのインストール

下記のコマンドを使ってreact-native-image-pickerをインストールします。

npm install --save react-native-image-picker

iOSではreact-native-image-pickerを使うため下記のコマンドを実行します。

cd ios
pod install
cd ..

権限の設定

次は、react-native-image-pickerを使って写真の機能を実現するためには権限(Permission)が必要です。

iOSの権限設定

iOSでreact-native-image-pickerを使うためにはios/[project name]/Info.plistを開いて下記のように修正します。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  ...
  <key>NSPhotoLibraryUsageDescription</key>
  <string>$(PRODUCT_NAME) would like access to your photo gallery</string>
  <key>NSCameraUsageDescription</key>
  <string>$(PRODUCT_NAME) would like to use your camera</string>
  <key>NSPhotoLibraryAddUsageDescription</key>
  <string>$(PRODUCT_NAME) would like to save photos to your photo gallery</string>
  <key>NSMicrophoneUsageDescription</key>
  <string>$(PRODUCT_NAME) would like to use your microphone (for videos)</string>
</dict>
</plist>

アンドロイドの権限設定

アンドロイドでreact-native-image-pickerを使うためにはandroid/app/main/AndroidManifest.xmlを開いて下記のように修正します。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.reactnativeimagepickerexample">
    ...
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    ...
</manifest>

使い方

react-native-image-pickerを使うためにはまず、下記のようにライブラリをインポートします。

import ImagePicker from 'react-native-image-picker';

そして、下記のように使うことができます。

写真とカメラロール、カスタムボタンを表示

const options = {
  title: 'Load Photo',
  customButtons: [
    { name: 'button_id_1', title: 'CustomButton 1' },
    { name: 'button_id_2', title: 'CustomButton 2' }
  ],
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
};
...
ImagePicker.showImagePicker(options, (response) => {
  console.log('Response = ', response);

  if (response.didCancel) {
    console.log('User cancelled image picker');
  } else if (response.error) {
    console.log('ImagePicker Error: ', response.error);
  } else if (response.customButton) {
    console.log('User tapped custom button: ', response.customButton);
    Alert.alert(response.customButton);
  } else {
    // You can also display the image using data:
    // const source = { uri: 'data:image/jpeg;base64,' + response.data };
    setImageSource(response.uri);
  }
});

カメラ表示

const options = {
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
};
...
ImagePicker.launchCamera(options, (response) => {
  if (response.error) {
    console.log('LaunchCamera Error: ', response.error);
  }
  else {
    setImageSource(response.uri);
  }
});

カメラロール表示

const options = {
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
};
...
ImagePicker.launchImageLibrary(options, (response) => {
  if (response.error) {
    console.log('LaunchImageLibrary Error: ', response.error);
  }
  else {
    setImageSource(response.uri);
  }
});

オプション

react-native-image-pickerは下記のようなオプションを使うことができます。

オプジョン	必須	タイプ	iOS	アンドロイド	説明
title	X	string	○	○	ImagePickerの上に表示されるタイトル
cancelButtonTitle	X	string	○	○	ImagePickerのチャンセルボタンのタイトル
takePhotoButtonTitle	X	string	○	○	ImagePickerの写真ボタンのタイトル
chooseFromLibraryButtonTitle	X	string	-	○	ImagePickerのカメラロール表示ボタンのタイトル
chooseWhichLibraryTitle	X	string	○	○	アンドロイドでカメラアプリが複数インストールされた場合、表示されるダイアログのタイトル
customButtons	X	[{name?: string; title?: string;}]	○	○	カメラボタンとカメラロールボタン以外にカスタムボタンを追加するとき使う
cameraType	X	‘front’, ‘back’	○	-	前のカメラを使うか、後ろのカメラを使うか決める
mediaType	X	‘photo’, ‘video’, ‘mixed’	○	○	写真のみ表示、ビデオのみ表示、写真とビデオを表示
maxWidth	X	number	○	○	最大広さ (Photo only)
maxHeight	X	number	○	○	最大高さ (Photo only)
quality	X	number	○	○	写真のクオリティ (0 to 1, photos only)
videoQuality	X	‘low’, ‘medium’, ‘high’	○	○	ビデオのクオリティ (iOS: low, medium, high / Android: low, high)
durationLimit	X	number	○	○	最大ビデオの録画時間 (second)
rotation	X	number	-	○	写真の回転角度 (Photo only, 0 to 360)
allowsEditing	X	boolean	○	-	写真をResizeするかどうか
noData	X	boolean	○	○	写真選択の結果でbase64のデータを取得するかどうか。大きい写真の場合、trueで設定すると性能をあげることができます。
tintColor	X	number, string	○	-	ImagePickerのボタンのタキストの色
storageOptions.skipBackup	X	boolean	○	-	trueを設定すると、iCloudへバックアップをしない。
storageOptions.path	X	string	○	○	イメージの保存場所を設定 (iOS: Documents/[path]/, Android: Pictures/[path]/)
storageOptions.waitUntilSaved	X	boolean	○	-	trueで設定すると、写真/ビデオがカメラロールへ保存されるまで待ってる。
storageOptions.privateDirectory	X	boolean	-	○	trueで設定すると写真/ビデオはAndroid/data/your_package/files/Picturesへ保存される。
permissionDenied.title	X	string	-	○	権限の設定ダイアログのタイトルを設定する。 (default: Permission denied)
permissionDenied.text	X	string	-	○	権限の設定ダイアログのメッセージ (default: To be able to take pictures with your camera and choose images from your library.)
permissionDenied.reTryTitle	X	string	-	○	再試しのボタンのタイトル (default: re-try)
permissionDenied.okTitle	X	string	-	○	確認ボタンのタイトル (default: I’m sure)

Response結果

オプション	必須	タイプ	iOS	アンドロイド	説明
customButton	○	string	○	○	カスタムボタンを選択した時、カスタムボタンのnameが帰ってくる
didCancel	○	boolean	○	○	ImagePickerでCancelボタンをおしたかどうか
error	○	string	○	○	Errorが発生した時のErrorメッセージ
data	○	string	○	○	イメージのBase64文字列 (Photo only)
uri	○	string	○	○	写真/ビデオのローカルファイルURI
origURL	X	string	○	-	カメラロールの写真/ビデオのURL
isVertical	○	boolean	○	○	写真/ビデオがVerticalかどうか
width	○	number	○	○	写真の広さ (Photo only)
height	○	number	○	○	写真の高さ (Photo only)
fileSize	○	number	○	○	ファイルのサイズ (Photo only)
type	X	string	○	○	ファイルのタイプ (Photo only)
fileName	X	string	○	○	ファイルの名前 (iOS: Photo, Video / Android: Photo)
path	X	string	-	○	ファイルパス
latitude	X	number	○	○	写真/ビデオの緯度 (情報がある場合)
longitude	X	number	○	○	写真/ビデオの軽度 (情報がある場合)
timestamp	X	string	○	○	写真/ビデオのMetadata Timestamp (ISO8601 UTC format)