时间戳

首页 > 解决方案 > React Native：未捕获的错误未定义不是对象（评估'_reactNativeImagePicker.default.showImagePicker'）

react-native - React Native：未捕获的错误未定义不是对象（评估'_reactNativeImagePicker.default.showImagePicker'）

问题描述

我已经按照本教程使用 Firebase 创建了一个图像上传应用程序并到了最后，当我使用它构建应用程序时，npx react-native run-ios我得到了这个错误：

Uncaught Error 
undefined is not an object (evaluating
'_reactNativeImagePicker.default.showImagePicker')

Source

 29 |  }
 30 |};
>31 |ImagePicker.showImagePicker(options, respon
    |^
 32 |  if (response.didCancel) {
 33 |    console.log('User cancelled image picked
 34 |  } else if (response.error) {

UploadScreen.js (31:5)

这是我的 UploadScreen.js 文件：

import React, { useState } from 'react';
import {
  View,
  SafeAreaView,
  Text,
  TouchableOpacity,
  StyleSheet,
  Platform,
  Alert,
  Image
} from 'react-native';
import ImagePicker from 'react-native-image-picker';
import storage from '@react-native-firebase/storage';
import * as Progress from 'react-native-progress';

export default function UploadScreen() {

  const [image, setImage] = useState(null);
  const [uploading, setUploading] = useState(false);
  const [transferred, setTransferred] = useState(0);

  const selectImage = () => {
    const options = {
      maxWidth: 2000,
      maxHeight: 2000,
      storageOptions: {
        skipBackup: true,
        path: 'images'
      }
    };
    ImagePicker.showImagePicker(options, 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 };
        console.log(source);
        setImage(source);
      }
    });
  };

  const uploadImage = async () => {
    const { uri } = image;
    const filename = uri.substring(uri.lastIndexOf('/') + 1);
    const uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri;
    setUploading(true);
    setTransferred(0);
    const task = storage()
      .ref(filename)
      .putFile(uploadUri);
    // set progress state
    task.on('state_changed', snapshot => {
      setTransferred(
        Math.round(snapshot.bytesTransferred / snapshot.totalBytes) * 10000
      );
    });
    try {
      await task;
    } catch (e) {
      console.error(e);
    }
    setUploading(false);
    Alert.alert(
      'Photo uploaded!',
      'Your photo has been uploaded to Firebase Cloud Storage!'
    );
    setImage(null);
  };

  return (
    <SafeAreaView style={styles.container}>
      <TouchableOpacity style={styles.selectButton} onPress={selectImage}>
        <Text style={styles.buttonText}>Pick an image</Text>
      </TouchableOpacity>
      <View style={styles.imageContainer}>
        {image !== null ? (
          <Image source={{ uri: image.uri }} style={styles.imageBox} />
        ) : null}
        {uploading ? (
          <View style={styles.progressBarContainer}>
            <Progress.Bar progress={transferred} width={300} />
          </View>
        ) : (
          <TouchableOpacity style={styles.uploadButton} onPress={uploadImage}>
            <Text style={styles.buttonText}>Upload image</Text>
          </TouchableOpacity>
        )}
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#bbded6'
  },
  selectButton: {
    borderRadius: 5,
    width: 150,
    height: 50,
    backgroundColor: '#8ac6d1',
    alignItems: 'center',
    justifyContent: 'center'
  },
  uploadButton: {
    borderRadius: 5,
    width: 150,
    height: 50,
    backgroundColor: '#ffb6b9',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 20
  },
  buttonText: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold'
  },
  imageContainer: {
    marginTop: 30,
    marginBottom: 50,
    alignItems: 'center'
  },
  progressBarContainer: {
    marginTop: 20
  },
  imageBox: {
    width: 300,
    height: 300
  }
});

我相信我读到showImagePickerreact-native-image-picker 包不再使用 ，所以我认为这可能是这里的问题？

如果这是正确的，那么我假设“showImagePicker”有一个替代品，如果是这样，它是什么以及如何修改我的代码才能工作？

谢谢 ：）

编辑：我现在已经实现了launchCamera 和launchImageLibrary，它允许我从库中选择一张照片，但是我得到了这个警告/错误？并且没有任何内容上传到 Firebase....控制台警告

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

解决方案

导入在 v4 中更改，在教程中版本为 v3 或更低版本。yarn add或npm install将始终安装最新的稳定版本，因此如果主要版本发生更改，您需要检查重大更改。

https://github.com/react-native-image-picker/react-native-image-picker#methods

有新的进口

import {launchCamera, launchImageLibrary} from 'react-native-image-picker';

检查此导入和导出更改参考https://github.com/react-native-image-picker/react-native-image-picker/issues/1746#issuecomment-858670659

从回购自述文件

确保您正在阅读适用于您的版本的文档，例如，如果您使用 3.8.0 版本，请转到标签 3.8.0 并阅读这些文档。该文档始终是主分支的文档。

另请阅读版本发布说明以了解任何重大更改，尤其是在您更新主要版本时。

推荐阅读