如何在 react-native-image-picker 中提供仅从图库中选择图像的选项？答案

【问题标题】：How to give option to select image only from gallery in react-native-image-picker?如何在 react-native-image-picker 中提供仅从图库中选择图像的选项？
【发布时间】：2020-11-25 07:15:33
【问题描述】：

下面的代码弹出显示相机或从图库中选择。我不想要相机选项。我想在调用此函数时启动图库。有什么办法吗？

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

function selectImageFromGallery() {
const options = {
  title: 'Select Avatar',
  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 };
  }
});}

【问题讨论】：

2k 次浏览，没有一个正确答案...难以置信

标签： react-native react-native-android react-native-image-picker

【解决方案1】：

这是您在从2.x.x 迁移到3.x.x 中需要更改的两行：

// before, 2.x.x
import ImagePicker from 'react-native-image-picker';
ImagePicker.showImagePicker(options , response => {
    ...
});

// after, 3.x.x
import {launchCamera, launchImageLibrary} from 'react-native-image-picker';
launchImageLibrary(options , response => {
    ...
});

【讨论】：

【解决方案2】：

要从图库中获取图像，请使用以下代码：

  var options = {
            title: 'Select Image',
            allowsEditing: false,
            quality:0.9,
            noData: true,
            maxWidth:1200,
            maxHeight:1200,
            mediaType: "photo",
            customButtons: [
              { name: 'customOptionKey', title: 'Choose Photo from Custom Option' },
            ],
            storageOptions: {
                skipBackup: true,
                cameraRoll: false
            },
          };

          ImagePicker2.launchImageLibrary(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);
              alert(response.customButton);
            } else {
              let source = response;
              // You can also display the image using data:
              // let source = { uri: 'data:image/jpeg;base64,' + response.data };
              this._sendpic(response.uri);
            }
          });

并使用以下代码从相机获取图像：


        var options = {
            title: 'Select Image',
            allowsEditing: false,
            quality:0.9,
            noData: true,
            maxWidth:1200,
            maxHeight:1200,
            mediaType: "photo",
            customButtons: [
              { name: 'customOptionKey', title: 'Choose Photo from Custom Option' },
            ],
            storageOptions: {
                skipBackup: true,
                cameraRoll: false
            },
          };

          ImagePicker2.launchCamera(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);
              alert(response.customButton);
            } else {
              let source = response;
              // You can also display the image using data:
              // let source = { uri: 'data:image/jpeg;base64,' + response.data };
              this._sendpic(response.uri);
            }
          });

欲了解更多信息，请参阅此链接：link

【讨论】：

【解决方案3】：

使用 launchImageLibrary 而不是 showImagePicker。它会直接询问图库选项

ImagePicker.launchImageLibrary(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 };
  }
});

【讨论】：