Image Picker 在 React Native 应用程序中不起作用，为啥？

Posted 2023-03-15

【中文标题】Image Picker 在 React Native 应用程序中不起作用，为啥？

【英文标题】：Image Picker not working in React Native app, why?Image Picker 在 React Native 应用程序中不起作用，为什么？

【发布时间】：2019-01-24 18:01:46

【问题描述】：

我已经成功安装了 react-native-image-picker，对于一个全新的 react native 应用程序，将其链接并通过 info.plist 文件授予正确的权限以访问相机、照片等...

我在 react-native-image-picker 页面上使用自述文件中的代码，但收到错误消息

当尝试 openGallery() 时，我收到以下警告并且没有图像库打开：

可能出现未处理的 Promise Rejection TypeError； undefined 不是函数（靠近...reactNativeImagePicker.default.launchImageLibrary...）

这是我的代码：

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

class App extends Component 

  constructor(props) 
    super(props)

    this.state = 
      fileURL: '',
    
  

   //function
   openGallery = async () => 
      const options = 
        mediaType: 'video'
      

    ImagePicker.launchImageLibrary(options, (response) => 
      console('Response = ', response);

      if(response.didCancel)
        console.log('User cancelled image picker');
      
      else
       this.setState( fileURL: response.uri );
      
    );
 

render() 
  return (
   <View style=styles.container>      
    <Button 
       style=margin: 20
       onPress=this.openGallery
       title='Open Gallery'
       backgroundColor='blue'
    />
   </View>

);

    

它运行的磨坊样板代码。怎么回事？

@BoredKid，我在控制台日志中得到了这个：

对于（ImagePicker）：

showImagePicker: ƒ
showImagePicker: ƒ showImagePicker(options, callback)
__proto__: Object

for (ImagePicker.showImagePicker);

ƒ showImagePicker(options, callback) 
      if (typeof options === 'function') 
        callback = options;
        options = ;
      

      return ImagePickerManager.showImagePicker((0, _objectS…

【问题讨论】：

这是在模拟器还是真机上？ ios、android 还是两者兼有？

在 Mac (iPhone X) 上的 iOs 模拟器上，根本不使用 Expo

【参考方案1】：

而不是写

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

你应该声明（在同一个地方）...

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

这对我有用。

【参考方案2】：

该模块没有默认导出。您需要使用命名导出：

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

或

import launchImageLibrary from 'react-native-image-picker';

【参考方案3】：

使用新输入更新：您的ImagePicker 对象没有launchImageLibrary 也没有launchCamera。您的安装有问题... 可能是安装不正常，或者您的某个步骤出错了。让我们尝试重新安装，我们会看到问题仍然存在

【讨论】：

完美，从 Oct2018 回滚到 v0.27.0，一切正常：D 仍然不知道为什么当我按照完全相同的过程进行安装时最新的 v0.28.0 不起作用。现在“乐趣”开始了：react-native-video-processing

感谢您帮助我更深入地研究这个问题 :)

不只是重新安装，我必须确保我安装了最新版本，对我来说最新版本是：“react-native-image-picker”：“^3.3.2”，

【参考方案4】：

我通过安装最新版本解决了这个错误，对我来说是

"react-native-image-picker": "^3.3.2",

并且还使用存储库中的示例代码： https://github.com/react-native-image-picker/react-native-image-picker/blob/main/example/src/App.js

import React, useState, useEffect from 'react';
import StyleSheet, Text, View, Image from 'react-native';
import cameraImage from '../../../../assets/icons/camera.png';
import galleryImage from '../../../../assets/icons//gallery.png';
import TouchableWithoutFeedback from 'react-native-gesture-handler';
import * as ImagePicker from 'react-native-image-picker';
import PermissionsAndroid from 'react-native';
const ImagePicker = () => 
  const [responseCamera, setResponseCamera] = React.useState(null);
  const [responseGallery, setResponseGallery] = React.useState(null);

  const openCameraWithPermission = async () => 
    try 
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.CAMERA,
        
          title: 'App Camera Permission',
          message: 'App needs access to your camera ',
          buttonNeutral: 'Ask Me Later',
          buttonNegative: 'Cancel',
          buttonPositive: 'OK',
        ,
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) 
        ImagePicker.launchCamera(
          
            mediaType: 'photo',
            includeBase64: false,
            maxHeight: 200,
            maxWidth: 200,
          ,
          (response) => 
            console.log(response);
            setResponseCamera(response);
            setResponseGallery(null);
          ,
        );
       else 
        console.log('Camera permission denied');
      
     catch (err) 
      console.warn(err);
    
  ;

  return (
    <View
      style=
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-around',
        margin: 4,
      >
      <TouchableOpacity onPress=() => openCameraWithPermission()>
        responseCamera === null ? (
          <Image style=styles.icon source=cameraImage />
        ) : (
          <Image style=styles.icon source=uri: responseCamera.uri />
        )
      </TouchableOpacity>
      <TouchableOpacity
        onPress=() =>
          ImagePicker.launchImageLibrary(
            
              mediaType: 'photo',
              includeBase64: false,
              maxHeight: 200,
              maxWidth: 200,
            ,
            (response) => 
              setResponseGallery(response);
              setResponseCamera(null);
            ,
          )
        >
        responseGallery === null ? (
          <Image style=styles.icon source=galleryImage />
        ) : (
          <Image style=styles.icon source=uri: responseGallery.uri />
        )
      </TouchableOpacity>
    </View>
  );
;

const styles = StyleSheet.create(
  icon: 
    height: 50,
    width: 50,
  ,
);

export default ImagePicker;

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