如何使用 react-native-camera 将捕获的图像保存到自定义应用程序特定文件夹

Posted 2023-03-11

【中文标题】如何使用 react-native-camera 将捕获的图像保存到自定义应用程序特定文件夹

【英文标题】：How to save captured image to custom app specific folder using react-native-camera

【发布时间】：2018-08-25 16:14:51

【问题描述】：

我正在使用 react-native-camera 中的 RNCamera 并使用 CameraRoll react-native API 保存照片。但是 saveToCameraRoll 方法只获取 takePictureAsync 返回的照片 uri。 并将照片保存到 DCIM 文件夹。但我想将它保存到某个应用程序特定的文件夹中。我怎样才能到达它？

【参考方案1】：

我使用了很酷的 rn-fetch-blob 库来实现这一目标。这里instructions

【讨论】：

你能分享一些代码吗？我是新手，无法对本机做出反应，无法按照该指令进行操作。如果可能，请分享一些代码。

【参考方案2】：

我可以创建一个目录，但我未能将图像移动到该文件夹​​，但是如果它对您有帮助

import React from 'react';
//import react in our code. 
import  StyleSheet, Text, View, 
Alert, ActivityIndicator, Permissionsandroid  from 'react-native';
//import all the basic components we are going to use.
import  CameraKitCameraScreen  from 'react-native-camera-kit';
//import CameraKitCameraScreen we are going to use.
import RNFetchBlob from 'react-native-fetch-blob'

export default class App extends React.Component 
state = isPermitted:false
constructor(props) 
super(props);
var that=this;
async function requestCameraPermission() 
try 
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.CAMERA,
'title': 'CameraExample App Camera Permission',
'message': 'CameraExample App needs access to your camera '

)
if (granted === PermissionsAndroid.RESULTS.GRANTED) 
//If CAMERA Permission is granted
//Calling the WRITE_EXTERNAL_STORAGE permission function
requestExternalWritePermission();
 else 
alert("CAMERA permission denied");

 catch (err) 
alert("Camera permission err",err);
console.warn(err)


async function requestExternalWritePermission() 
try 
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
'title': 'CameraExample App External Storage Write Permission',
'message': 'CameraExample App needs access to Storage data in your SD Card '

)
if (granted === PermissionsAndroid.RESULTS.GRANTED) 
//If WRITE_EXTERNAL_STORAGE Permission is granted
//Calling the READ_EXTERNAL_STORAGE permission function
requestExternalReadPermission();
 else 
alert("WRITE_EXTERNAL_STORAGE permission denied");

 catch (err) 
alert("Write permission err",err);
console.warn(err)


async function requestExternalReadPermission() 
try 
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
'title': 'CameraExample App Read Storage Write Permission',
'message': 'CameraExample App needs access to your SD Card '

)
if (granted === PermissionsAndroid.RESULTS.GRANTED) 
//If READ_EXTERNAL_STORAGE Permission is granted
//changing the state to re-render and open the camera 
//in place of activity indicator
that.setState(isPermitted:true)
 else 
alert("READ_EXTERNAL_STORAGE permission denied");

 catch (err) 
alert("Read permission err",err);
console.warn(err)


//Calling the camera permission function
requestCameraPermission();

onBottomButtonPressed(event) 

if (event.type) 
//const captureImages = JSON.stringify(event.captureImages);

if (event.type == "capture") 

const pictureFolder = RNFetchBlob.fs.dirs.SDCardDir+'/Optimize/';
const captureImageLength = event.captureImages.length;
RNFetchBlob.fs.exists(pictureFolder).then((exists)=>
if(exists)
RNFetchBlob.fs.isDir(pictureFolder).then((isDir)=>
if(isDir)

RNFetchBlob.fs.mv(event.captureImages[0].uri, RNFetchBlob.fs.dirs.SDCardDir+'/Optimize/').then(() => 
alert('Image Moved');
).catch((e)=> alert("FAILED:= "+e.message) );
else
alert('Some Error Happened');

).catch((e)=> alert("Checking Directory Error : "+e.message); );
else
RNFetchBlob.fs.mkdir(pictureFolder).then(()=>
alert('DIRECTORY CREATED');
).catch((e)=> alert("Directory Creating Error : "+e.message); );

);



render() 
if(this.state.isPermitted)
return (
<CameraKitCameraScreen
// Buttons to perform action done and cancel
actions= rightButtonText: 'Done', leftButtonText: 'Cancel' 
onBottomButtonPressed=event => this.onBottomButtonPressed(event)
flashImages=
// Flash button images
on: require('./assets/flashon.png'),
off: require('./assets/flashoff.png'),
auto: require('./assets/flashauto.png'),

cameraFlipImage=require('./assets/flip.png')
captureButtonImage=require('./assets/capture.png')
/>
);
else
return ( 
<ActivityIndicator />
)



const styles = StyleSheet.create(
container: 
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
,
);

【讨论】：

如果您可以格式化您的代码（添加缩进）使其可读，那就太好了。