React Native：未定义的未捕获错误不是 object（评估 '_reactNativeImagePicker.default.showImagePicker'）

Question

我已经按照 this tutorial 使用 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
  }
});

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

如果那是正确的，那么我假设有 'showImagePicker' 的替代品，如果是的话那是什么，我该如何修改我的代码才能工作？

谢谢:)

编辑：我现在已经实现了 launchCamera 和 launchImageLibrary，它们允许我从图库中挑选一张照片，但我得到了这个 warning/error？并且没有任何内容上传到 Firebase....

Answer 1

导入在 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

来自回购自述文件

Make sure you're reading the doc applicable to your version, for example if your using version 3.8.0 go to tag 3.8.0 and read those docs. This doc is always that of main branch.

Also read version release notes for any breaking changes especially if you're updating the major version.

React Native：未定义的未捕获错误不是 object（评估 '_reactNativeImagePicker.default.showImagePicker'）

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

react-native

react-native-ios

react-native-image-picker