Matias Quinteros
Preguntastudent•hace 8 años
Como sería el esquema de un programa que lea todos los archivos .jpg que encuentre dentro de la memoria interna o la SD Card de Android y luego los retorne en una variable utilizable.
Estoy practicando el desarrollo en react native y me encuentro con un inconveniente. Que no puedo hacer retornar una variable de un promise para luego cargarlo en el render. Dejo acá el código que uso por el momento.
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, } from 'react-native'; import RNFetchBlob from 'react-native-fetch-blob' //import scanFiles './components/scanfiles'; export default classTestAppextendsComponent { render() { var carpetas, label1, label2, label3, label4, label5; var filepath; var count = 0; var finish = false; var listo = 0; var bandera_dir = false; RNFetchBlob.fs.ls("/storage/") .then((files) => { var files_jpg = []; for(f in files) { label1 = "/storage/"+files[f]; //Deberia buscar los archivos .jpg o .jpeg y recorrer en busca de nuevas carpetas RNFetchBlob.fs.stat(label1) .then((stats) => { console.log("Estamos recorriendo label1: "+label1); //Deberia buscar los archivos .jpg o .jpeg y recorrer en busca de nuevas carpetas if (stats.type == "directory") { // Es un directorio asique buscamos nuevas carpetas dentro de ese directorio if(stats.size !== "0") { RNFetchBlob.fs.ls(stats.path) .then((fileslabel1) => { for(fl in fileslabel1) { label2 = stats.path+"/"+fileslabel1[fl]; RNFetchBlob.fs.stat(label2) .then((statslabel2) => { console.log("Estamos recorriendo label2: "+label2); if(statslabel2.type == "directory") { RNFetchBlob.fs.ls(statslabel2.path) .then((fileslabel2) => { if(fileslabel2.length !== 0) { for(f2 in fileslabel2) { label3 = statslabel2.path+"/"+fileslabel2[f2]; RNFetchBlob.fs.stat(label3) .then((statlabel3) => { console.log("Estamos recorriendo label3: "+label3); if(statlabel3.type == "directory") { RNFetchBlob.fs.ls(statlabel3.path) .then((fileslabel3) => { if(fileslabel3.length !== 0) { for(f3 in fileslabel3){ label4 = statlabel3.path+"/"+fileslabel3[f3]; RNFetchBlob.fs.stat(label4) .then((statlabel4) => { console.log("Estamos recorriendo label4: "+label4); if(statlabel4.type == "directory"){ RNFetchBlob.fs.ls(statlabel4.path) .then((fileslabel4) => { if(fileslabel4.length !== 0) { for(f4 in fileslabel4) { label5 = statlabel4.path+"/"+fileslabel4[f4]; RNFetchBlob.fs.stat(label5) .then((statlabel5) => { console.log("Estamos recorriendo label5: "+label5); if(statlabel5.type == "directory") { //console.log("TERMINAMOS DE EXTRAER TODO EL MOVIL Y SU TARJETA DE MEMORIA"); } else { //analizar si es un .jpg o .jpeg value=statlabel5.filename; if( value.match(/\.(jpg)|(jpeg)|$/) ){ files_jpg.push(statlabel5.path); } } }) .catch((errlabel5) => { console.log(errlabel5) }) } } }) .then(success => { console.log(files_jpg); }) } else { //analizar si es un .jpg o .jpeg value=statlabel3.filename; if( value.match(/\.(jpg)|(jpeg)$/) ){ files_jpg.push(statlabel3.path); } } }) } } }) } else { //analizar si es un .jpg o .jpeg value=statlabel3.filename; if( value.match(/\.(jpg)|(jpeg)$/) ){ files_jpg.push(statlabel3.path); } } }) .catch((errlabel3) => { console.log(errlabel3); }) } } }) } else { //analizar si es un .jpg o .jpeg value=statslabel2.filename; if( value.match(/\.(jpg)|(jpeg)$/) ){ files_jpg.push(statslabel2.path); } } }) .catch((errlabel2) => { console.log(errlabel2); }) } }) } } else { //Es un archivo asique comprobamos si es .jpg o .jpeg para poder guardarlo value=stats.filename; if( value.match(/\.(jpg)|(jpeg)$/) ){ files_jpg.push(stats.path); } } }) .catch((err) => { console.log(err); }) } }) return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit index.android.js </Text> <Text style={styles.instructions}> Double tap R on your keyboard to reload,{'\n'} Shake or press menu button for dev menu </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, }); AppRegistry.registerComponent('TestApp', () => TestApp);
¿Como piensan ustedes que sería el esquema correcto?
Hasta el momento e desarrollado la aplicación la cual funciona con la libreria react-native-fetch-blob que me ayuda acceder a las carpetas y los archivos que dispongo en el movil y e logrado recorrer carpeta por carpeta, y mientras recorro encuentro y almaceno en un array los archivos .jpg encontrados.
Lo que no logro hacer bien es:
- Poder recorrer infinitamente carpeta por carpeta, es decir, si existe una carpeta que la abra y la recorra.
- Poder guardar bien la variable con los arrays de los archivos encontrados
- Poder retornar la variable con los arrays de los archivos encontrados
- Poder usar el array en el render de la app
Saludos y gracias !
- Para recorrer infinitamente carpeta por carpeta me imagino un algoritmo recursivo más o menos así
Gonzalo Aguirre
teacher•hace 8 años
Vayamos punto por punto.
findJpgFilesRecursive(path) { return RNFetchBlob.fs.stat(path) .then(stat => { if (stat.type === "file") { if (stat.filename.match(/\.(jpg)|(jpeg)|$/)) { return [stat.path] } } if(stat.type === "directory") { const result = [] return RNFetchBlob.fs.ls(path) .then(children => { return Promise.all(children.map(child => { return findJpgFilesRecursive(child).then(childResult => result.concat(childResult)) })) }) .then(() => result) } return [] }) }
Para después hacer
findFilesRecursive('/storage/')Matias Quinteros
student•hace 8 años
No pido que me resuelvan el ejercicio, pero si que me den una mano diciendo que cosas debería utilizar eso me ahorraría bastante tiempo. Ya que ando buscando pero todavía no se bien que sería lo correcto a usar.
