Una primera mirada a firstBorn, el nuevo marco de componentes de React Native

primogénito es un marco de componentes React Native UI, que sigue la metodología de diseño Atomic Design de Brad Frost.

La versión 1.0.0 se publicó recientemente como un módulo npm el 1 de abril (aunque no es broma ...).

En este artículo, veremos una demostración de los componentes existentes que ofrece el primogénito.

La Metodología de diseño

La metodología de diseño atómico sigue el principio de que las interfaces de usuario se pueden deconstruir en 5 fases diferentes.

De acuerdo con esta metodología de diseño, las fases se describen a continuación:

  • Átomos: los elementos básicos e independientes, como cuadros de texto, iconos, botones o entrada de texto.
  • Moléculas: una combinación de diferentes átomos, que en conjunto tienen un mejor valor operativo. Por ejemplo, una entrada de texto con una etiqueta de texto para explicar el contenido o mostrar un error en los datos ingresados.
  • Organismos: una combinación de diferentes moléculas que funcionan juntas para formar estructuras complejas. Por ejemplo, una forma de muchas moléculas TextInput.
  • Plantilla: Una combinación de diferentes organismos que forman la base de la página. Esto incluye el diseño y el contexto de estos organismos.
  • Página: todo lo anterior trabajando juntos en una sola instancia de la vida real, da lugar a una página. También es la implementación real de la plantilla.

Empezando

Primero creemos una nueva aplicación React Native usando la CLI:

react-native init firstBornExample

Una vez creado, muévase a la carpeta de la aplicación:

cd firstBornExample

Para agregar primogénitos a la aplicación, instálela así:

npm i --save @ 99xt / first-born

primogénito tiene otras dos dependencias que necesitaremos instalar nosotros mismos.

npm i --save create-react-class react-native-vector-icons

Luego tendremos que seguir esta guía para configurar react-native-vector-icons para la aplicación.

create-react-class no tiene pasos de configuración adicionales.

¡Y estamos listos para irnos!

Uso

Para importar los componentes, la declaración se verá así:

importar {} desde '@ 99xt / first-born'

El módulo viene con los siguientes componentes incorporados:

Átomos

Texto

El átomo de texto tiene un conjunto fijo de tamaños. Estos tamaños difieren según la plataforma de la aplicación subyacente. También podemos pasar un color a este átomo de texto.

 ejemplo de primogénito 
Texto (Android)

Icono

El átomo Icon está construido sobre la clase Ionicons de react-native-vector-icons. Los Ionicons vienen con dos versiones diferentes de un ícono tanto para Android como para iOS. Esta clase representará el icono de acuerdo con la plataforma subyacente.

Ícono (Android)

Botón

El átomo del botón se puede representar de múltiples maneras. Solo acepta textos, iconos e imágenes como elementos secundarios para mostrar. Tiene 3 tamaños diferentes, así como 4 etiquetas diferentes que mostrarán el botón en muchas combinaciones.

Botones (Android)

Entrada

El átomo de entrada es una entrada de texto con estilo nativo de reacción. Muestra un borde de color al usuario si TextInput está enfocado. El método onChangeText es obligatorio.

...
handleTextChange = (texto) => {
  this.setState ({text: text})
}
Entrada (Android)

Esto también permite indicar un error al usuario. Para usar esta función, necesitaremos crear un método de validación. Este método debería devolver un valor booleano dependiendo de la validez del texto ingresado. Uno de estos escenarios es verificar si una dirección de correo electrónico sigue el formato convencional. Este método es el que se pasa en la propiedad isValid.

checkInputValidity = (texto) => {
  const regex = /^\w+([\.-font>?\w+)*@\w+([\.-font>?\w+)*(\.\w{2,3})+$/;
  return regex.test (texto);
}
...
Validación de entrada (Android)

TextArea

El átomo TextArea es una entrada de texto con estilo nativo de reacción. Muestra un borde de color al usuario si TextInput está enfocado. También aumenta en altura con más datos ingresados.