TypeError: undefined is not an object (评估'_reactNativeImagePicker.default.showImagePicker')答案

【问题标题】：TypeError: undefined is not an object (evaluating '_reactNativeImagePicker.default.showImagePicker')TypeError: undefined is not an object (评估'_reactNativeImagePicker.default.showImagePicker')
【发布时间】：2021-04-09 17:22:21
【问题描述】：

使用 React Image Picker 我遇到了这个错误： TypeError: undefined is not an object (评估 '_reactNativeImagePicker.default.showImagePicker')

当我点击图像选择器功能时会发生这种情况

手机截图：

这是我的代码：

import React from 'react';
import { View, Text,Button } from 'react-native';
import ImagePicker from 'react-native-image-picker';

const options = {
    title: 'Select Avatar',
    customButtons: [{ name: 'fb', title: 'Choose Photo from Facebook' }],
    storageOptions: {
      skipBackup: true,
      path: 'images',
    },
  };

function Picker(){
    const openPicker =()=>{
      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 };
      
          // You can also display the image using data:
          // const source = { uri: 'data:image/jpeg;base64,' + response.data };
      
          console.log(source)
        }
      });
    }
    return(
        <View>
            <Button onPress={openPicker} title="Open image picker"></Button>
        </View>
    )
}

export default Picker;

【问题讨论】：

您使用的react-native-image-picker 的确切版本是什么？你可以在package.json文件下查看。
如果您使用的是react-native-image-picker 3.x.x 版本，showImagePicker 将不再起作用。请参考here for the migration guide。您需要使用launchImageLibrary 提到的here
我正在使用图像选择器版本 3.1.2 。我实际上是在遵循一个教程，他们在其中下载了新版本，然后他们使用了对他们有用的旧文档。版本只是launchImageLibrary(options?, callback)？ 2.x.x 版本之前没有其他东西需要整个代码。
我不知道它在教程中是如何工作的。但根据docs。您需要更改您的import statement 并将launchimagelibrary 与options 和response 一起使用
我用启动图像库改变了它，但现在我收到了这个错误。 TypeError: undefined is not a function (靠近'...(0, _reactNativeImagePicker.default)...')。你能改变我更新的所需代码吗？

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

【解决方案1】：

我遇到了同样的问题，这就是我解决它的方法。

import * as ImagePicker from "react-native-image-picker"

【讨论】：

关注这个：stackoverflow.com/a/68378454/7921804
是的，这对我有用

【解决方案2】：

检查你的 lib 版本，如果它是 3x，然后尝试这样的事情

import * as ImagePicker from "react-native-image-picker"


                <Button onPress={() =>
                        ImagePicker.launchImageLibrary(
                          {
                            mediaType: 'photo',
                            includeBase64: false,
                            maxHeight: 200,
                            maxWidth: 200,
                          },
                          (response) => {
                            console.log(response);
                            this.setState({resourcePath: response});
                          },
                        )
                      }
                title="Select Image"/>

【讨论】：

【解决方案3】：

如果你的 react-native-image-picker 版本是 3.x.x 那么，用这些行替换上面的代码，

import {launchCamera, launchImageLibrary} from 'react-native-image-picker'; // Migration from 2.x.x to 3.x.x => showImagePicker API is removed.
...

const openPicker =()=>{
  launchCamera(options, (response) => { // Use launchImageLibrary to open image gallery
    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 };
  
      // You can also display the image using data:
      // const source = { uri: 'data:image/jpeg;base64,' + response.data };
  
      console.log(source)
    }
  });

阅读docs

【讨论】：

请更好地解释为什么上面的代码有效。
之所以有效，是因为我们都找到并复制了包含showImagePicker 的代码，但该方法在 3.x.x 版本中不存在。所以，我们应该使用launchImageLibrary 或launchCamera。
@FilipSavic 在我的案例中，图片库在 ios 中同时打开和关闭。但是android工作正常。有什么想法吗？
@R.singh 不知道......对不起：/也许检查一下是否有人已经在他们的 GitHub 上提交了问题。
关注这个：stackoverflow.com/a/68378454/7921804

【解决方案4】：

问题：
import ImagePicker from "react-native-image-picker"

解决方案：
import * as ImagePicker from "react-native-image-picker"

【讨论】：

【解决方案5】：

替换

  import { ImagePicker } from 'react-native-image-picker',

与

var ImagePicker = require('react-native-image-picker');

这对我有用。

【讨论】：