Vamos a aprender a generar un listado en Vue Native sencillo, en el cual vamos a usar dos componentes principales, el scrollview, para que nuestra pantalla permita esta funcionalidad, y la de un ítem, que en este ejemplo, viene siendo un view.
Es importante notar antes de comenzar, que NO necesitamos emplear ningún complemento, o plugin para hacer funcionar algún elemento adicional, solamente los componentes que tenemos de gratis en Vue Native.
Usaremos el componente del scrollview para colocar nuestros elementos de lista; este contenedor es excelente para colocar aquel contenido que puede que se le tenga que aplicar scroll para poder visualizarlo o puede que no; su estructura es simple, le definimos que ocupe el tamaño máximo:
<scroll-view :style="{ minHeight: '100%' }">Y de una nuestros elementos o items que están comprendidos en un view con su texto y nuestras opciones tipo CRUD, la de eliminar y editar (por ejemplo):
<view v-for="c in cites" v-bind:key="c.id">
<text :style="{ fontSize: 18 }"> {{ c.name }} {{ c.surname }} </text>
<view :style="{ flexDirection: 'row-reverse' }">
<touchable-opacity :on-press="() => remove(c)">
<text> Eliminar </text>
</touchable-opacity>
<touchable-opacity :on-press="() => edit(c)">
<text> Editar </text>
</touchable-opacity>
</view>
</view>Aquí empleamos dos funciones al desencadenar el evento click o on-press de llamar a remover el ítem o editarlo.
Finalmente el código completo del template:
<template>
<view class="container">
<FlashMessage position="top" />
<scroll-view :style="{ minHeight: '100%' }">
<view v-for="c in cites" v-bind:key="c.id">
<text :style="{ fontSize: 18 }"> {{ c.name }} {{ c.surname }} </text>
<view :style="{ flexDirection: 'row-reverse' }">
<touchable-opacity :on-press="() => remove(c)">
<text> Eliminar </text>
</touchable-opacity>
<touchable-opacity :on-press="() => edit(c)">
<text> Editar </text>
</touchable-opacity>
</view>
</view>
</scroll-view>
<FABExtended
:style="style.fab_dowm"
label="Crear"
:callback="() => navigation.navigate('Form')"
/>
</view>
</template>En el cual como extra, empleamos un botón de tipo extendido que es personalizado por nosotros y hablamos de él en otra entrada.
Y por supuesto, nuestro v-for, para iterar los elementos o items.
En cuanto al Script, lo típico, cargamos componentes, por ejemplo el del estilo mediante JavaScrip y el del botón de tipo flotante y las funciones tipo CRUD para eliminar y editar los registros, que permiten, eliminar un ítem bajo un diálogo de confirmación y mandar a otro componente para la edición, respectivamente:
<script>
import { Alert } from "react-native";
import FlashMessage from "react-native-flash-message";
import { showMessage } from "react-native-flash-message";
import {
storeGetCites,
storeSetCite,
storeDeleteCite,
} from "../helpers/storage";
import { style } from "../helpers/styles";
import FABExtended from "../components/FABExtended";
export default {
async mounted() {
this.cites = await storeGetCites();
// TEMPORAL
if (this.cites.length == 0) {
await storeSetCite({
name: "Andres",
surname: "Cruz",
age: "30",
description: "Hola Mundo",
state: "Soltero",
sex: true,
});
await storeSetCite({
name: "Maria",
surname: "Lopez",
age: "22",
description: "Hola Mundo 2",
state: "Soltero",
sex: false,
});
await storeSetCite({
name: "Juan",
surname: "Mendoza",
age: "24",
description: "Otro",
state: "Soltero",
sex: true,
});
this.cites = await storeGetCites();
}
// FINAL TEMP
this.navigation.addListener("didFocus", async () => {
//alert(this.navigation.state.params)
// this.cites = []
this.cites = await storeGetCites();
});
},
data() {
return {
cites: [],
style,
};
},
components: {
FABExtended,
FlashMessage,
},
props: {
navigation: {
Object,
},
},
methods: {
edit(cite) {
this.navigation.navigate("Form", cite);
console.log(cite);
},
async remove(cite) {
return Alert.alert(
"Eliminar",
"¿Seguro que desea eliminar la cita seleccionada?",
[
{
text: "Si",
onPress: async () => {
await storeDeleteCite(cite);
showMessage({
message: "Cita eliminada exitosamente.",
type: "danger",
});
this.cites = await storeGetCites();
},
},
{
text: "No"
}
]
);
},
},
};
</script>
<style>
.container {
width: 90%;
margin-top: 15px;
margin-right: auto;
margin-left: auto;
}
</style>Aunado a lo anterior, tenemos un par de componentes más:
- El componente de Alert, para preguntar confirmación en la eliminación
- El componente llamado FlashMessage, que es un componente de un tercero y que por ende instalamos mediante Node de manera externa, y nos permite mostrar un mensaje tipo flash.
Puedes encontrar el código completo de este ejemplo, en el siguiente repositorio, que forma parte de mi curso completo sobre Vue Native.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter