Posted at

【React Native】Image picker を使ってみる


react-native-image-picker

画像、動画を選択する「Image picker」のライブラリを使ってみようと思います。

https://github.com/react-community/react-native-image-picker


前提ライブラリ

本記事は、「NativeBase」の導入を前提としています。一からプロジェクトを作成する場合には、以下の記事を参考に環境作成してください。

【React Native】NativeBase導入


インストール

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


権限の付与

ネイティブアプリを作成する際にも行いますが、ライブラリ、カメラへのアクセスにはユーザの許可が必要であり、その旨をアプリとして宣言しておく必要があります。プロジェクト内にあるiOS、Androidのそれぞれのネイティブプロジェクトに設定を記述する必要があります。


iOS

Info.plist に以下の情報を追加します。

    <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 your microphone (for videos)</string>


Android

AndroidManifest.xml に以下の情報を追加します。

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

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>


アプリ作成

import React, {Component} from 'react';

import { Container, View, Header, Left, Body, Right, Button, Title, Text, Thumbnail } from 'native-base';

type Props = {};
export default class App extends Component<Props> {
constructor(props) {
super(props);
this.state = {
image: null,
}
}

showPicker = () => {
let ImagePicker = require('react-native-image-picker')

let options = {
title: '画像を選択',
storageOptions: {
skipBackup: true,
path: 'images',
},
}

ImagePicker.showImagePicker(options, (response) => {
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else {
console.log(response.uri)
this.setState({image: response.uri})
}
});
}

render() {
return (
<Container>
<Header>
<Left />
<Body>
<Title>メイン</Title>
</Body>
<Right />
</Header>
<View>
<Button small iconRight transparent primary onPress={this.showPicker}>
<Text>画像の選択</Text>
</Button>
{this.state.image && <Thumbnail square large source={{uri: this.state.image}} />}
</View>
</Container>
);
}
}


 動作の様子


iOS

ios.gif


Android

android.gif


リポジトリ

本記事で作成したものは以下で公開していますので、参考にしてください。

https://github.com/k-neo/ReactNativeCourseImagePicker