El siguiente componente CapturePhoto se usa para tomar una foto usando el Selector de imágenes nativo de reacción, una vez que se toma una foto, copio el archivo de la foto a una ruta específica que paso como apoyo a este componente desde su padre (una galería de imágenes que es una lista del componente CapturePhoto) La razón por la que estoy copiando la foto es que no puedo encontrar otra forma de especificar la ruta al selector de imágenes como opción.
El código funciona para tomar una foto y copiar la imagen del archivo en la ruta específica, pero la foto no se muestra hasta que tomo una segunda foto (retraso)
Estoy aprendiendo react-native y Javascript al mismo tiempo, sé que no es la buena manera, ¡pero no tengo tiempo para aprender Javascript primero!
¡Cualquier orientación proporcionada sería muy apreciada!
import React, { useState } from 'react'; import { TouchableOpacity, View, Image, StyleSheet, Text } from 'react-native'; import * as ImagePicker from 'react-native-image-picker'; import placeHolder from "./placeHolder.png" export default function CapturePhoto({ photoPath }) { let uri; let decodedURI; const [pickerResponse, setPickerResponse] = useState(null); var RNFS = require('react-native-fs'); const copyPhoto = (source, destination) => { if (source === undefined || destination === undefined) { return; } else { RNFS.copyFile(source, destination) .then((result) => { console.log("\n\n>>>>>>>>>>>>The photo has been copied ") }).catch((error) => { console.log("\n\n>>>>>>>>>>>>Copy photo failed: ", error) }) } } const onCameraPress = async () => { const options = { saveToPhotos: true, mediaType: 'photo', includeBase64: false, }; ImagePicker.launchCamera(options, setPickerResponse); uri = pickerResponse?.assets && pickerResponse.assets[0].uri; console.log("\n\n>>>>>>>>>>>>destination photo: ", photoPath); decodedURI = decodeURIComponent(uri) await uri ? copyPhoto(decodedURI, photoPath) : console.log("\n\n>>>>>>>>>>>>The photo has not been copied ") } return ( <View style={{ justifyContent: 'center', alignItems: 'center', marginTop: 10 }}> <TouchableOpacity onPress={() => onCameraPress()}> <Image style={styles.avatarImage} source={uri ? { uri } : placeHolder} /> </TouchableOpacity> </View> ); } const styles = StyleSheet.create({ avatarImage: { height: 260, width: 260, overflow: 'hidden', margin: 10 } });En realidad, no necesita ningún estado para guardar la respuesta del selector de imágenes. Si desea guardar el uri de la imagen en la que se hizo clic, puede tener un estado para ella y agregar el código dentro de copyPhoto() después de que se haya copiado el archivo.
var RNFS = require('react-native-fs'); Esta declaración no debe estar dentro de la función. Cada vez que el componente se vuelve a renderizar, lo requerirá de nuevo. Agréguelo como si hubiera agregado declaraciones de importación.
Deberías cambiar tus funciones así.
const copyPhoto = (source, destination) => { if (source === undefined || destination === undefined) { return; } else { RNFS.copyFile(source, destination) .then((result) => { console.log("\n\n>>>>>>>>>>>>The photo has been copied "); }) .catch((error) => { console.log("\n\n>>>>>>>>>>>>Copy photo failed: ", error); }); } }; const onCameraPress = async () => { const options = { saveToPhotos: true, mediaType: "photo", includeBase64: false }; const result = await ImagePicker.launchCamera(options); //if the user cancelled the process if (result.didCancel) { return alert("You cancelled the process"); } const {assets} = result; if (assets.length > 0) { const decodedUri = decodeURIComponent(assets[0].uri); copyPhoto(decodedUri, photoPath); } };