Question

我完全按照https://github.com/marcshilling/react-native-image-picker中使用react-native-image-picker，通过带有react-native run-ios的终端以及通过Atom编辑器进行编码来显示示例。

我做了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
设置权限

/AndroidManifest.xml

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

Answer 2

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

Answer 3

似乎没有定义IMagePicker。

您是否尝试过使用

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

而不是第一行？

Answer 4

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 5

您好，您可以尝试一些事项：运行react-native link

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

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

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

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

Answer 6

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

Answer 7

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

您需要通过Xcode for iOS并手动编辑您的settings.gradle才能使其正常工作：

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

您无需为Android和iOS执行这些步骤，但针对这两个平台列出的步骤至关重要

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

Answer 8

如果您正在使用xcode并在模拟器或真实设备上收到此错误，请确保在安装和反应链接命令后按照手动说明进行操作。如所描述的那样。

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

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

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

Answer 9

注意：安装后，您必须以react-native run-ios或重启项目。 react-native运行Android

可能是您安装了选择器，但没有重新启动打包程序

：）

Answer 10

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

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

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

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

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

Answer 11

根据您的第一条评论，您提到您不使用Xcode，而是使用Atom和Terminal。在大多数情况下，仅npm install就足够了，但是在某些特定于平台的情况下，可以通过使用react-native链接进行链接或遵循文档中提供的手动安装步骤来实现。如果您不使用Xcode，则无法为IOS平台完全链接此库。确保使用Xcode并按照手动步骤操作，否则请使用react-native链接解决问题。

Answer 12

我遇到了同样的问题，在iOS中，这是由于缺少权限（即使在模拟器中）所导致的。在此处查看权限：

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

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

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

12 个答案: