En este tutorial, aprenderemos cómo usar AsyncStorage
React Native para guardar datos en una base de datos.
Después de crear y diseñar nuestra lista de datos utilizando el FlastList
componente, agregamos dos botones para abrir URL con navegadores web y guardar los metadatos del artículo localmente para leerlos más tarde. Veamos cómo implementar la funcionalidad del botón Leer más tarde usando el AsyncStorage
módulo en React Native.
AsyncStorage es un sistema de almacenamiento de valor clave asíncrono, no cifrado, persistente para React Native que debe usarse en lugar de LocalStorage porque hace uso de mecanismos eficientes de almacenamiento de datos como archivos y sistemas de bases de datos (SQLite).
En iOS, AsyncStorage
almacena valores pequeños en un diccionario serializado y valores más grandes en archivos separados. En Android, AsyncStorage
utiliza SQLite o RocksDB .
Dirígete a tu terminal, asegúrate de estar dentro de tu proyecto React Native y ejecuta el siguiente comando:
$ npm install @react-native-community/async-storage --save
Debe ejecutar el run-android
(o run-ios
) nuevamente, después de instalar async-storage
:
$ react-native run-android
A continuación, abra el App.js
archivo e importe de la AsyncStorage
siguiente manera:
import AsyncStorage from '@react-native-community/async-storage';
A continuación, agregue el siguiente método:
const saveArticle = async (key, value) =>{
try {
await AsyncStorage.setItem(key, value);
} catch (e) {
console.log(e);
}
};
En este punto, antes de implementar la interfaz de usuario para mostrar los marcadores, podemos asegurarnos de que los valores estén almacenados correctamente en nuestra base de datos local utilizando el siguiente método:
const getAllData = () =>{
AsyncStorage.getAllKeys().then((keys) => {
return AsyncStorage.multiGet(keys)
.then((result) => {
console.log(result);
}).catch((e) =>{
console.log(e);
});
});
}
Simplemente necesita llamarlo desde el saveArticle()
método de la siguiente manera:
const saveArticle = async (key, value) =>{
try {
await AsyncStorage.setItem(key, value);
getAllData();
} catch (e) {
console.log(e);
}
};
También necesita ejecutar el comando react-native log-android
o react-native log-ios
para ver el resultado del console.log()
método en su terminal.
A continuación, ahora todo lo que necesita hacer es llamar al saveArticle()
método cuando presione el botón Leer más tarde . En su ArticleItem
componente, cambie la onPress
propiedad del segundo IconButton
componente de la siguiente manera:
const ArticleItem = ({article}) => {
const { title, description, url, urlToImage } = article;
return (
<View style = { styles.articleContainer }>
<Image style={ styles.articleImage } source={{ uri: urlToImage }} />
<Text style= { styles.articleTitle }>
{ title }
</Text>
<Text style = { styles.articleDescription }>
{ description }
</Text>
<View style = { styles.articleBtns}>
<IconButton width= "50%" color = "white" bgcolor = "#ff5c5c" icon = { readIcon } onPress = { () => { console.log("Button pressed!")} } title = "Open" />
<IconButton width= "50%" color = "white" bgcolor = "#ff5c5c" icon = { bookmarkIcon } onPress = { () => { saveArticle(title, url); } } title = "Read later" />
</View>
</View>
)
}
Cuando se presiona el botón leer más tarde, llamamos al saveArticle()
método con el título como clave y la URL como valor.
Veremos en la siguiente parte cómo crear un componente para mostrar los artículos marcados usando los métodos AsyncStorage.getAllKeys()
y AsyncStorage.multiGet()
.
0 Comentarios
Dejanos tu comentario para seguir mejorando!