Un primo sguardo a firstBorn, il nuovo framework dei componenti di React Native

first-born è un React Native UI Component Framework, che segue la metodologia di progettazione Atomic Design di Brad Frost.

La versione 1.0.0 è stata recentemente pubblicata come modulo npm il 1 aprile (non è uno scherzo però ...).

In questo articolo, vedremo una demo dei componenti esistenti offerti dal primogenito.

La metodologia di progettazione

La metodologia di Atomic Design segue il principio secondo cui le interfacce utente possono essere decostruite in 5 fasi diverse.

Secondo questa metodologia di progettazione, le fasi sono descritte come segue:

  • Atomi: gli elementi base e autonomi, come le caselle Testo, Icone, Pulsanti o TextInput.
  • Molecole: una combinazione di atomi diversi, che insieme hanno un miglior valore operativo. Ad esempio, un TextInput con un'etichetta di testo per spiegare il contenuto o visualizzare un errore nei dati immessi.
  • Organismi: una combinazione di diverse molecole che funzionano insieme per formare strutture complesse. Ad esempio, una forma di molte molecole TextInput.
  • Modello: una combinazione di diversi organismi che formano la base della pagina. Ciò include il layout e il contesto di questi organismi.
  • Pagina: tutto quanto sopra, lavorando insieme in un'unica istanza di vita reale, dà origine a una pagina. È anche l'implementazione effettiva del modello.

Iniziare

Cerchiamo prima di creare una nuova app React Native usando l'interfaccia della riga di comando:

Reat-native init firstBornExample

Una volta creato, spostati nella cartella dell'app:

cd firstBornExample

Per aggiungere il primogenito all'app, installalo in questo modo:

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

il primogenito ha altre due dipendenze che dovremo installare noi stessi.

npm i - salva le icone di vettore nativo di reazione di classe di creazione-reazione

Dovremo quindi seguire questa guida per impostare le icone vettore nativo reattivo per l'app.

create-reply-class non ha passaggi di configurazione aggiuntivi.

E siamo a posto!

uso

Per importare i componenti, la dichiarazione sarà simile alla seguente:

importare {} da "@ 99xt / first-born"

Il modulo viene fornito con i seguenti componenti integrati:

atomi

Testo

L'atomo di testo ha un set fisso di dimensioni. Queste dimensioni differiscono a seconda della piattaforma dell'app sottostante. Possiamo anche passare un colore a questo atomo di testo.

 esempio di primogenito 
Testo (Android)

Icona

L'atomo Icon è costruito sulla classe Ionicon di reattivo-icone-vettoriali-icone. Ionicon viene fornito con due diverse interpretazioni di un'icona sia per Android che per iOS. Questa classe visualizzerà l'icona in base alla piattaforma sottostante.

Icona (Android)

Pulsante

L'atomo Button può essere reso in più modi. Accetta solo testi, icone e immagini come elementi figlio da visualizzare. Ha 3 dimensioni diverse, nonché 4 tag diversi che renderanno il pulsante in molte combinazioni.

Pulsanti (Android)

Ingresso

L'atomo di input è un TextInput reattivo in stile. Visualizza un bordo colorato per l'utente se TextInput è attivo. Il metodo onChangeText è obbligatorio.

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

Questo supporta anche l'indicazione di un errore per l'utente. Per utilizzare questa funzione, dovremo creare un metodo di convalida. Questo metodo dovrebbe restituire un valore booleano in base alla validità del testo inserito. Uno di questi scenari sta verificando se un indirizzo e-mail segue il formato convenzionale. Questo metodo è quello passato nella proprietà isValid.

checkInputValidity = (text) => {
  const regex = /^\w+([\.-×?\w+)*@\w+([\.-[?\w+)*(\.\w{2,3})+$/;
  return regex.test (testo);
}
...
Convalida input (Android)

TextArea

L'atomo TextArea è un TextInput reattivo in stile. Visualizza un bordo colorato per l'utente se TextInput è attivo. Aumenta anche in altezza con più dati inseriti.