Tutorial

Bienvenidos al tutorial de react-native-form-builder!

En esta sección, explicaremos cómo puede crear formularios de una forma muy simple, ¡sin la necesidad de saber de programación!. Detallaremos rigurosamente todo lo que abarca el archivo de desarollo, en su caso ".js". Nuesta intención, es manifestarnos de forma vulgar, sin entrar en términos técnicos, para que todo aquel interesado pueda entender facilmente y que la falta conocimientos infomáticos no sea un inpedimento para su aprendizaje (¡Por lo que no hay escusa que valga!).

Nuestra intensión es que al finalizar este artículo pueda codificar los formularios que necesita para sus proyectos, comunicándose fluidamente con react-native-form-builder. Le enseñaremos las estructuras que interpreta este paquete, con ejemplos, aunque para aquellos que busquen algo más complejo pueden encontrar en la sección de Ejemplos, otros casos. Para finalizar, si logramos, que al terminar este capítulo, usted pueda previsualizar rápidamente sus mockups (diseño de páginas) en las estructuras que entiende react-native-form-builder, vamos a sentirnos más que realizados.

Sin más introducción, póngase cómodo, que ya comenzamos!

Ambiente de desarrollo en su archivo .js

Para comenzar, react-native-form-builder necesita interpretar que tipo de pregunta necesita en cada caso, por lo que debe hablarle en un lenguaje que él interprete. Para ello, dentro del paquete están incluidos esos "tipos". Para importarlos debe escribir la siguiente linea de código en su archivo js.

import {types} from 'react-native-form-builder';

Una vez que tenga los tipos importados. Debemos buscar un "lugar" donde se va a guardar su estructura. Para ello javascript le brinda las "constantes", que puede entenderlas como "un lugar donde se guardan cosas que NUNCA cambian".

En este caso necesita que este "lugar" pueda almacenar muchas estructuras, por lo que la declara como una colección de estructuras (o Array de estructuras) de la siguiente manera:

const myConstant = [];

Esta línea de código le dice, "myConstant es una constate que almacena muchas cosas", y analizada detalladamente sería:

• "const" un palabra reservada de javascript para la declaración de constantes.
• "myConstant" el nombre de su constante.
• "=" el símbolo para decirle qué esta guardando en su constante.
• "[" el inicio de la colección y "]" el fin de la misma.

Lo único que le falta es decirle a javascript, la constante (que contiene nuesta estructura de formulario) que quiere exportar de su archivo js. Esto lo hace de la siguiente manera:

export default myConstant;

Una vez planteado el ambiente de desarrollo en su archivo, ya puede enfocarse en la creación de su formulario.

Los objetos JSON

Anteriormente, explicamos que va manejar una coleccion de estructuras, esto es porque el paquete funciona con un conjunto de objetos JSON. Estos se ven asi:

const myJSON = {
   id: 1,
   name: 'Ricardo',
   lastName: 'Ruben',
   age: 20,
   isDeveloper: true,
   isAnalyst: false,
   money: 24145.23,
   parents: [
       {
           name: 'Sofía',
           lastName: 'López',
           isWork: true,
           age: 43
       },
       {
           name: 'Miguel',
           lastName: 'Ruben',
           isWork: true,
           age: 45
       }
   ],
   car: {
       name: 'Toyota 86',
       color: 'Rojo',
       wheels: 4
   }
};

Como puede ver nuestro objeto comienza con "{" y termina con "}". Dentro de este tenemos las siguientes etiquetas, que hacen referencia a un campo en específico:

• "id", esta etiqueta esta guardando un dato tipo numérico, 1.
• "name", esta etiqueta esta guardando un dato tipo texto, 'Ricardo'.
• "lastName", esta etiqueta esta guardando un dato tipo texto, 'Ruben'.
• "age", esta etiqueta esta guardando un dato tipo numérico, 20.
• "isDeveloper", esta etiqueta esta guardando un dato tipo booleano, true.
• "isAnalyst", esta etiqueta esta guardando un dato tipo booleano, false.
• "money", esta etiqueta esta guardando un dato tipo numérico, 24145.23.
• "parents", esta etiqueta esta guardando un dato tipo colección, [{}] (una colección de objetos JSON, aunque puede admitir cualquiera otro tipo de dato).
• "car", esta etiqueta esta guardando un dato tipo objeto JSON, {} (esto es un objeto dentro de otro, podemos tener infinidades de objetos dentro de otros).

Como puede destacar, el signo de asignación que rige es ":" y lo que separa las etiquetas es ",", a excepción de que se encuentre en la última. (Para mas información más detallada y técnica sobre objetos JSON puede visitar esta página).

Estructura de los formulario

Los formulario que va a crear, rigen bajo una única arquitectura, la cual es:

Secciones -> Filas -> Preguntas ("Colecciones de secciones" que contienen "colecciones de Filas", y que estas, continen "colecciones de preguntas")