O primă privire asupra noului cadru component al primului Born, React Native

primul născut este un React Native UI Component Framework, care urmărește metodologia de proiectare Atomic Design de Brad Frost.

Versiunea 1.0.0 a fost publicată recent ca un modul npm la 1 aprilie (totuși nu este o glumă…).

În acest articol, vom vedea o demonstrație a componentelor existente oferite de prim-născuți.

Metodologia proiectării

Metodologia Proiectării Atomice respectă principiul că interfețele utilizatorului pot fi deconstruite la 5 faze diferite.

Conform acestei metodologii de proiectare, fazele sunt descrise astfel:

  • Atomi: Elementele de bază, de sine stătătoare, cum ar fi casetele Text, Icoane, Butoane sau TextInput.
  • Molecule: O combinație de atomi diferiți, care împreună au o valoare operațională mai bună. De exemplu, un TextInput cu o etichetă Text pentru a explica conținutul sau pentru a afișa o eroare în datele introduse.
  • Organisme: O combinație de molecule diferite care funcționează împreună pentru a forma structuri complexe. De exemplu, o formă de multe molecule TextInput.
  • Template: O combinație de diferite organisme care stau la baza paginii. Aceasta include aspectul și contextul acestor organisme.
  • Pagina: Toate lucrurile menționate mai sus, într-o singură instanță reală, dau naștere unei pagini. Este, de asemenea, implementarea reală a șablonului.

Noțiuni de bază

Să creăm mai întâi o nouă aplicație React Native utilizând CLI:

react-native init firstBornExample

După ce este creat, treceți în folderul aplicației:

cd firstBornExample

Pentru a adăuga primul născut în aplicație, instalați-o astfel:

npm i - salvare @ 99xt / primul-născut

primul născut are alte două dependențe pe care va trebui să le instalăm.

npm i - salvăm pictogramele create-reacționează-native-vector-vector

Apoi, va trebui să urmăm acest ghid pentru a configura icoane react-native-vector pentru aplicație.

create-react-class nu are pași suplimentari de configurare.

Și suntem bine să mergem!

folosire

Pentru a importa componentele, declarația va arăta astfel:

importați {} din „@ 99xt / primul-născut”

Modulul include următoarele componente încorporate:

atomii

Text

Atomul de text are un set fix de dimensiuni. Aceste dimensiuni diferă în funcție de platforma de aplicații de bază. De asemenea, putem trece o culoare acestui atom de text.

 exemplu de prim-născut 
Text (Android)

icoană

Atomul Icon este construit pe partea de sus a clasei Ionicons-native-vector-icons. Ioniconii vin cu două redări diferite ale unei pictograme atât pentru Android cât și pentru iOS. Această clasă va reda pictograma în funcție de platforma de bază.

Pictogramă (Android)

Buton

Atomul butonului poate fi redat în mai multe moduri. Accepta doar textele, pictogramele și imaginile ca elemente pentru a fi afișate. Are 3 dimensiuni diferite, precum și 4 etichete diferite care vor redă butonul în multe combinații.

Butoane (Android)

Intrare

Atomul de intrare este un redactat TextInput original. Afișează un bord colorat pentru utilizator dacă TextInput este în focalizare. Metoda onChangeText este obligatorie.

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

Acest lucru acceptă, de asemenea, indicarea unei erori pentru utilizator. Pentru a utiliza această caracteristică, va trebui să creăm o metodă de validare. Această metodă ar trebui să returneze un boolean în funcție de validitatea textului introdus. Un astfel de scenariu este verificarea dacă o adresă de e-mail urmează formatul convențional. Această metodă este cea transmisă în proprietatea isValid.

checkInputValidity = (text) => {
  const regex = /^\w+([\.- Alan?\w+)*@\w+([\.- Alanjare?
  return regex.test (text);
}
...
Validare de intrare (Android)

TextArea

Atomul TextArea este un redactat original TextInput. Afișează un bord colorat pentru utilizator dacă TextInput este în focalizare. De asemenea, crește în înălțime cu mai multe date introduse.