React Nativeで画像選択を行う

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が入っています。
    }
  }
);