浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React Native】アルバムやカメラから画像を取得できるライブラリ「react-native-image-picker」

アプリから端末のアルバムにアクセスしたり、カメラで撮影した写真を取得したりする機能を実装するために、「react-native-image-picker」というライブラリを導入しました。
これが本当にシンプルで実装も簡単だったのでおすすめ!

GitHub のページはこちらから。

GitHub – react-native-image-picker/react-native-image-picker: A React Native module that allows you to use native UI to select media from the device library or directly from the camera.
https://github.com/react-native-image-picker/react-native-image-picker

 

インストールは下記のコマンドを実行します。

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

iOS の場合は、ライブラリのインストールが完了した後に npx pod-install も実行してください。
また、AndroidManifest.xmlInfo.plist に必要な項目を追加してください。
追加項目については、こちらを参考にしました。

サンプルコードは下記の通りです。

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

const options = {
  title: '写真を取得する',
  takePhotoButtonTitle: 'カメラで写真を撮影する',
  chooseFromLibraryButtonTitle: 'アルバムから写真を選択する',
  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);
  } else {
    const source = { uri: response.uri };
    this.setState({
      image: source,
    });
  }
});

変数 source にアルバムから取得した写真もしくはカメラで撮影した写真のデータが格納されます。
今回は、こちらを stateimage に保存しました。
なお、画像を表示する際には下記のようにすればOKです。

<Image source={this.state.icon} />

必要なコードは以上です。
個人的に、表示されるダイアログの各ボタンのテキストを指定できるのが良かったです。
あとは、実装が本当に簡単でした!
これはおすすめのライブラリですね!

 

以上、React Native でアルバムからの画像取得やカメラ撮影機能を実装できるライブラリ「react-native-image-picker」のご紹介でした。
ご参考になれば幸いです。

  • この記事いいね! (0)