7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

react-native-image-picker

画像、動画を選択する「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

7
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?