图像选择器在 React Native 应用程序中不起作用，为什么

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

我正在使用反应本机图像选择器页面上的自述文件中的代码，但收到错误

尝试打开图库（）时，我收到以下警告，并且没有打开图像库：

可能未处理的承诺拒绝类型错误;未定义不是一个函数（近...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，我在控制台日志中得到这个：

对于（图像选择器）：

{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…

而不是写

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

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

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

这对我有用。

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

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

或

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

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

"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" />

使用新输入进行了更新：您的ImagePicker对象没有launchImageLibrary也没有launchCamera。您的安装有问题...也许安装无法正常工作，或者您错误地执行了某个步骤。让我们尝试重新安装，我们会看到问题仍然存在

当我

更改以下方法的版本时，安装反应本机图像 - 选择器默认关闭版本 2 时，会发生相同的错误 npm 安装反应本机图像-picker@3.3.2

相关内容

最新更新

热门标签：