undefined 不是对象（评估 ImagePickerManager.showImagePicker）答案

【问题标题】：undefined is not an object(evaluating ImagePickerManager.showImagePicker)undefined 不是对象（评估 ImagePickerManager.showImagePicker）
【发布时间】：2017-12-15 10:11:58
【问题描述】：

var ImagePicker = require('react-native-image-picker');
call() {   
    var options = {
      title: 'Select Avatar',
      customButtons: [
        {name: 'fb', title: 'Choose Photo from Facebook'},
      ],
      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 {
        let source = { uri: response.uri };

        // You can also display the image using data:
        // let source = { uri: 'data:image/jpeg;base64,' + response.data };

        this.setState({
          avatarSource: source
        });
      }
    });
  }

我从渲染 onClick 调用这个函数。我正在使用

react-native-image-picker@0.26.7

但它给了我 undefined is not an object 错误。另外请告诉我如何将其链接到手机图库以选择图像。请建议我解决方案

【问题讨论】：

添加原生android的代码后是否运行了react-native run-android？
我没有。但是现在当我运行 react-native run-android 时，它正在工作。谢谢你。能否请您告诉如何将其链接到手机图库
它在 android 上运行，但在 IOS 上出现以下错误 - 无法读取未定义的属性“showImagePicker”
你需要为IOS运行react-native run-ios...
对不起，我不知道如何链接它（我不知道），我以前从未使用过该库..但我知道这个错误来自另一个库

标签： react-native

【解决方案1】：

如果您更新您的导入：

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

ImagePicker.showImagePicker(options, (response) => {
         // code here
};

一切都会好起来的

【讨论】：

【解决方案2】：

首先你必须链接模块。

react-native link react-native-image-picker

然后检查以下文件：

android/app/build.gradle：compile project(':react-native-image-picker')

android/setting.gradle：

include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')

android/app/src/..../MainApplication

问题就在这里：

https://github.com/react-community/react-native-image-picker/issues/414#issuecomment-265060406

【讨论】：

谢谢@DennisFrea。当我运行 react-native run-android 命令时，此问题已解决
仅供参考.....如果您使用的是 0.60 它应该已经包含自动链接。

【解决方案3】：

我认为这是解决这个问题的好方法：

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

<TouchableOpacity style={styles.CameraIconContent}
          onPress={() =>
            ImagePicker.launchImageLibrary(
              {
                mediaType: 'photo',
                includeBase64: false,
                maxHeight: 200,
                maxWidth: 200,
              },
              (response) => {
                console.log(response);
                this.setState({resourcePath: response});
              },
            )
          }
                    >
                    <Image
                        source={CAMERA_ICON}
                            resizeMode = "contain"
                            style={{
                                width: 20,
                                height: 20
                            }}
                    />
            </TouchableOpacity>

【讨论】：

【解决方案4】：

如果您使用的是 4.x.x 版，请按照以下步骤操作：

首先：进入'android/app/src/main/AndroidManifest.xml'中的AndroidManifest并添加权限：

<uses-permission android:name="android.permission.CAMERA" />

之后：如本例所示访问相机：

import {PermissionsAndroid} from 'react-native';
import * as ImagePicker from "react-native-image-picker"

async function cameraPermission() {
    const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA);
    if(granted === PermissionsAndroid.RESULTS.GRANTED) {
      // if get here, the user has accepted the permissions
    } else {
      // if get here, the user did NOT accepted the permissions
    }
}

function takePhoto() {
    cameraPermission();

    ImagePicker.launchCamera({
        mediaType: 'photo',
        maxHeight: 600,
        maxWidth: 800
    }, res => {
        if (!res.didCancel) {
            this.setState({ imageUri: res.uri });
        }
    });
}

注意！如果你要使用ios，你还需要授予权限

【讨论】：

【解决方案5】：

当我升级我的旧项目时，我遇到了同样的问题。 react-native-image-picker 版本是 ^0.26.7，实际上是非常旧的版本。

之前的代码是

let ImagePicker = require('react-native-image-picker');
     
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 {
                    this.profileImageObject = response;
                    let source = { uri: response.uri };
      ;              this.setState({
                        profilePicture: source,
                        isProfilePicture: true
                    })
                }
            });

错误如下图所示

我只是从library 导入all 并使用launchImageLibrary 函数如下：

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

ImagePicker.launchImageLibrary(options, (response) => {...}

现在它对我有用。我希望它也能对开发者有所帮助。

【讨论】：