React Nativeで画像選択を行う

Tomoumi Nishimura 21views 更新:2017年5月11日

React Nativeを利用したアプリ開発で、画像を選択する処理を実現する際には、react-native-image-pickerパッケージが利用できます。

導入

基本的には

npm install react-native-image-picker@latest --save
react-native link

でOKです。

使い方

画像選択画面を表示するには、showImagePickerを利用します。 画像選択後は、選択された画像または処理失敗内容(エラー/キャンセル)を引数としたコールバック関数が呼び出されます。

また、画像選択orカメラ起動時のメニューについては、showImagePicker呼び出し時にオプションを渡すことで変更が可能です。
–> react-native-image-picker > Options

ImagePicker.showImagePicker(options,
  (response) => { // このresponseに選択された画像または処理結果が入っています。
    if (response.didCancel) {
      console.log('User cancelled image picker');
    }
    else if (response.error) {
      console.log('ImagePicker Error: ', response.error);
    }
    else {
      // キャンセルまたはエラーではないので、画像が選択されています
      let source = { uri: response.uri }; // response.uriに選択された画像を表すURIが入っています。
    }
  }
);

参考

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません