如何在 react-native 中访问相机我无法将图片保存在手机存储中

Posted 2023-03-08

【中文标题】如何在 react-native 中访问相机我无法将图片保存在手机存储中

【英文标题】：How to access camera in react-native i can't save picture in my phone storage

【发布时间】：2021-01-10 11:26:31

【问题描述】：

这是我的 androidMainfest.xml

enter code here
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>


and here is my code
 import React,  Component, useRef, PermissionsAndroid  from 'react';
 import  View, StatusBar, TouchableOpacity, Image  from 'react-native';
 import RNCamera as Camera from 'react-native-camera';
 import styles from '../src/components/styles'; 
 import PhotoCaptureIcon from '../assets/camera.png'; 
 import CameraRoll from "@react-native-community/cameraroll";


 const checkAndroidPermission = async () => 
    try 
      const permission = PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE;
      await PermissionsAndroid.request(permission);
      Promise.resolve();
     catch (error) 
      Promise.reject(error);
    
;
 export default class Application extends Component  
     constructor(props)  
         super(); 
         this.camera = null; 
      
 


 takePicture =async () =>  
    if (Platform.OS === 'android')
        await checkAndroidPermission();
    
    if (this.camera) 
        const options =  quality: 0.5, base64: true ;
        const data = await this.camera.takePictureAsync(options);
        console.log(data.uri);
        if (data) 
            const result = await CameraRoll.save(data.uri);
            console.log('????result', result);
          
      
     
        
    



 render()  
     return (
     <View style=styles.container>         
      <StatusBar animated hidden /> 
     <Camera 
        ref=ref => 
            this.camera = ref;
          
          style=styles.preview
          type=Camera.Constants.Type.back
          flashMode=Camera.Constants.FlashMode.off
          captureAudio=false
          
         /> 
         <View style=[styles.overlay, styles.bottomOverlay]> 
             <TouchableOpacity style=styles.captureButton onPress=this.takePicture> 
                 <Image source=PhotoCaptureIcon /> 
             </TouchableOpacity> 
         </View> 
     </View>
     ); 
 
 

和错误 可能的未处理承诺拒绝（id：5）： 错误：权限被拒绝 promiseMethodWrapper@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2242:45 _callee$@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:130062:75 tryCatch@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:24919:23 调用@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:25092:32 tryCatch@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:24919:23 调用@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:24992:30 http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:25002:21 tryCallOne@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:26991:16 http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:27092:27 _callTimer@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:30531:17 _callImmediatesPass@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:30570:17 callImmediates@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:30787:33 __callImmediates@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2736:35 http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2522:34 __guard@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2719:15 flushedQueue@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2521:21 flushedQueue@[本机代码] invokeCallbackAndReturnFlushedQueue@[本机代码]

【参考方案1】：

您可以使用 npm 中的 react-native-image-picker 模块。并按照说明进行操作 -

Here on npm你可以找到模块。

【讨论】：

如何将图像保存在本地存储中？？

由于权限被拒绝，我无法在本地存储中保存 imgea

您使用的是哪个数据库？ exp : asynchstorage, sqlite 等将图像保存到手机，您需要请求以下权限 -

我用我的手机，我已经在 AndroidManifest.xml 中设置了权限

您需要在项目中配置数据库以在本地存储数据 (CRUD)。为此使用 asynchstorage 或 sqlite。 find out here`