
Crear una aplicación móvil sencilla que permita:
Registrar productos (nombre y precio).
Almacenarlos en una base de datos local.
Listarlos en pantalla.
Tener instalado Node.js
Tener instalado el entorno de React Native:
npx react-native init GestorProductos
Instalar el emulador de Android Studio o conectar un dispositivo real.
Entrar al proyecto:
cd GestorProductos
npm install react-native-sqlite-storage
npx pod-install # (solo en iOS)
Estructura del proyecto:
/GestorProductos
├── App.js
├── db.js
├── productoDao.js
// db.js
import SQLite from 'react-native-sqlite-storage';
SQLite.enablePromise(true);
const db = SQLite.openDatabase(
{
name: 'miapp.db',
location: 'default',
},
() => console.log('Base de datos abierta'),
error => console.log('Error: ', error)
);
export default db;
// productoDao.js
import db from './db';
export const crearTablaProducto = () => {
db.transaction(tx => {
tx.executeSql(
`CREATE TABLE IF NOT EXISTS productos (
id INTEGER PRIMARY KEY AUTOINCREMENT,
nombre TEXT,
precio REAL
);`
);
});
};
export const insertarProducto = (nombre, precio, callback) => {
db.transaction(tx => {
tx.executeSql(
'INSERT INTO productos (nombre, precio) VALUES (?, ?);',
[nombre, precio],
(_, resultado) => callback(true, resultado),
(_, error) => {
callback(false, error);
return false;
}
);
});
};
export const obtenerProductos = callback => {
db.transaction(tx => {
tx.executeSql(
'SELECT * FROM productos;',
[],
(_, { rows }) => callback(rows._array),
(_, error) => {
console.log(error);
return false;
}
);
});
};
import React, { useEffect, useState } from 'react';
import { View, Text, TextInput, Button, FlatList, StyleSheet } from 'react-native';
import {
crearTablaProducto,
insertarProducto,
obtenerProductos,
} from './productoDao';
export default function App() {
const [nombre, setNombre] = useState('');
const [precio, setPrecio] = useState('');
const [productos, setProductos] = useState([]);
useEffect(() => {
crearTablaProducto();
cargarProductos();
}, []);
const cargarProductos = () => {
obtenerProductos(data => setProductos(data));
};
const guardar = () => {
if (!nombre || !precio) return;
insertarProducto(nombre, parseFloat(precio), (ok) => {
if (ok) {
setNombre('');
setPrecio('');
cargarProductos();
}
});
};
return (
<View style={styles.container}>
<Text style={styles.title}>Gestor de Productos</Text>
<TextInput placeholder="Nombre" value={nombre} onChangeText={setNombre} style={styles.input} />
<TextInput placeholder="Precio" value={precio} onChangeText={setPrecio} style={styles.input} keyboardType="decimal-pad" />
<Button title="Guardar" onPress={guardar} />
<Text style={styles.subtitle}>Listado:</Text>
<FlatList
data={productos}
keyExtractor={item => item.id.toString()}
renderItem={({ item }) => (
<Text>{item.nombre} - ${item.precio.toFixed(2)}</Text>
)}
/>
</View>
);
}
const styles = StyleSheet.create({
container: { padding: 20, marginTop: 50 },
title: { fontSize: 20, marginBottom: 10 },
subtitle: { marginTop: 20, fontWeight: 'bold' },
input: { borderWidth: 1, marginBottom: 10, padding: 8 },
});
En Android:
npx react-native run-android
En iOS:
npx react-native run-ios
Más información en:
Frexus
No comments yet