React Native Image Picker：无法读取undefined的属性'showImagePicker'

Question

我正在使用https://github.com/marcshilling/react-native-image-picker，通过带有react-native-image-picker的终端和通过Atom编辑器编码完全按照react-native run-ios所示的示例。

我做了npm install react-native-image-picker@latest --save，目前package.json中的依赖关系显示："react-native-image-picker": "^0.22.8",

然后我点击一个按钮来触发imagePicker，但我收到了错误：Cannot read property 'showImagePicker' of undefined。

我究竟做错了什么？

这是代码

import ImagePicker from 'react-native-image-picker'
var Platform = require('react-native').Platform

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

export default class chooseImage extends Component {
  constructor() {
    super()

    this.state = {
      avatarSource: "",
    }
  }

  _uploadImage() {
    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 {
        // You can display the image using either data...
        const source = {uri: 'data:image/jpeg;base64,' + response.data, isStatic: true};

        // or a reference to the platform specific asset location
        if (Platform.OS === 'ios') {
          const source = {uri: response.uri.replace('file://', ''), isStatic: true};
        } else {
          const source = {uri: response.uri, isStatic: true};
        }

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

  render() {

    return (
      <View style={styles.container}>
          <TouchableHighlight
            onPress={this._uploadImage}
            underlayColor='transparent'
          >
            <Image
              source={this.state.avatarSource} style={styles.uploadAvatar}
            />
          </TouchableHighlight>
      </View>
    )
  }
}

编辑

当我console.log（ImagePicker）

Answer 1

• 使用manual installation
• 设置权限

/Android manifest.XML

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

Answer 2

如果您正在使用xcode并在模拟器或真实设备上出现此错误，请确保在安装和反应链接命令后遵循手动说明。如所描述的那样。

在XCode的“项目导航器”中，右键单击项目的“库”文件夹➜“将文件添加到<...>”。

转到node_modules➜response-native-image-picker➜ios➜选择RNImagePicker.xcodeproj

添加RNImagePicker.a以构建阶段 - >链接二进制与iOS 10+的库，将NSPhotoLibraryUsageDescription，NSCameraUsageDescription，NSPhotoLibraryAddUsageDescription和NSMicrophoneUsageDescription（如果允许视频）键添加到Info.plist，其中包含描述您的应用程序需要这些权限的原因的字符串。注意。 = RNImagePicker.a现在是libRNImagePicker.a并确保在项目构建阶段将其添加到lib的构建阶段本身。

然后你可以编译并运行它。

Answer 3

根据您的第一条评论，您提到您没有使用Xcode，而是使用Atom和终端。在大多数情况下，只有npm安装就足够了，但是有一些特定于平台的情况可以通过使用react-native链接链接或遵循文档中提供的手动安装步骤来实现。如果您没有使用Xcode，那么您无法完全为IOS平台链接此库。确保您使用Xcode并按照手动步骤或反应原生链接来解决您的问题。

Answer 4

我有同样的问题，在iOS中它是由于权限丢失，即使在模拟器中。请参阅此处的权限：

https://github.com/react-native-community/react-native-image-picker/blob/master/docs/Install.md

我只是错过了“NSPhotoLibraryAddUsageDescription”，它足以让“无法读取属性'showImagePicker'未定义”错误。

Answer 5

我已经工作了几个小时来解决这个问题！最后，在MainApplication.java中正确添加这些行之后，它就成了一个魅力。不要忘记重建项目。

Answer 6

似乎没有定义IMagePicker。

你尝试过使用过吗？

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

而不是第一行？

Answer 7

cannot read property y of undefined意味着你有一个声明x.y，使得x未定义。在这种情况下，x是ImagePicker。我最好的猜测是你的import语句导致了这个问题。试试这个：

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

代替

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

这也是示例所暗示的。

如果你想坚持使用import声明，

试试这个：

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

其中将模块作为ImagePicker导入并将其放入范围内。有关更多信息，请参阅：MDN on import statement

Answer 8

嗨，你可以尝试一些事情：运行react-native link

确保您已完成此步骤http://prntscr.com/hftr17

如果没有：您的最后机会是完全删除您的代码。克隆一个新的。

我成功地通过遵循这些来成功。

希望它可以给你一些东西。

Answer 9

重建你的应用程序。运行命令react-native run-ios和react-native run-android。

Answer 10

重建你的应用程序只意味着你会得到同样的错误。

您需要通过Xcode for iOS并手动编辑您的settings.gradle才能使用：

https://github.com/react-community/react-native-image-picker

您不需要为Android和iOS执行这些步骤，但是针对任一平台概述的步骤都至关重要

因此，除非您已经执行了react-native link，否则您需要完成每个编号的步骤并确保您的二进制文件正确链接。

Answer 11

如果您正在使用xcode并在模拟器或真实设备上出现此错误，请确保在安装和反应链接命令后遵循手动说明。如所描述的那样。

1. 在XCode的“项目导航器”中，右键单击项目的“库”文件夹➜“将文件添加到<...>”。
2. 转到node_modules➜response-native-image-picker➜ios➜选择RNImagePicker.xcodeproj
3. 添加RNImagePicker.a以构建阶段 - >使用库链接二进制文件
4. 对于iOS 10+，将NSPhotoLibraryUsageDescription，NSCameraUsageDescription，NSPhotoLibraryAddUsageDescription和NSMicrophoneUsageDescription（如果允许视频）键添加到Info.plist，其中包含描述您的应用需要这些权限的原因的字符串。

注意。 = RNImagePicker.a现在是libRNImagePicker.a并确保在项目构建阶段将其添加到lib的构建阶段本身。

然后你可以编译并运行它。

Answer 12

注意：安装后，您必须以react-native run-ios或react-native run-android重新启动项目

可能是你安装了选择器但没有重新启动包装器

: )