Et første kig på firstBorn, React Native's nye komponentramme

førstefødte er et React Native UI Component Framework, der følger designmetodikken Atomic Design af Brad Frost.

Version 1.0.0 blev for nylig offentliggjort som et npm-modul den 1. april (det er dog ingen vittighed ...).

I denne artikel vil vi se en demo af de eksisterende komponenter, der tilbydes af førstefødte.

Designmetoden

Metoden Atomic Design følger princippet om, at brugergrænseflader kan dekonstrueres til 5 forskellige faser.

I henhold til denne designmetodologi er faser beskrevet som følger:

  • Atomer: De grundlæggende, selvstændige elementer, f.eks. Tekst, ikoner, knapper eller tekstinputbokse.
  • Molekyler: En kombination af forskellige atomer, der tilsammen har bedre driftsværdi. For eksempel en TextInput med en tekstetiket for at forklare indholdet eller vise en fejl i de indtastede data.
  • Organismer: En kombination af forskellige molekyler, der fungerer sammen til dannelse af komplekse strukturer. For eksempel en form for mange TextInput-molekyler.
  • Skabelon: En kombination af forskellige organismer, der danner grundlaget for siden. Dette inkluderer layout og kontekst af disse organismer.
  • Side: Alt det ovenstående, der arbejder sammen i en enkelt virkelighedstilfælde, giver anledning til en side. Det er også den faktiske implementering af skabelonen.

Kom godt i gang

Lad os først oprette en ny React Native-app ved hjælp af CLI:

react-native init firstBornExample

Når det er oprettet, skal du flytte ind i appmappen:

cd førstBornExample

For at tilføje førstefødte til appen skal du installere den sådan:

npm i - gemme @ 99xt / førstefødte

førstefødte har to andre afhængigheder, som vi selv bliver nødt til at installere.

npm i - gemme create-react-class react-native-vector-ikoner

Vi bliver derefter nødt til at følge denne vejledning for at opsætte reaktive native-vektor-ikoner til appen.

create-react-class har ikke yderligere opsætningstrin.

Og vi er gode til at gå!

Anvendelse

For at importere komponenterne vil udsagnet se sådan ud:

import {} fra '@ 99xt / førstefødte'

Modulet leveres med følgende indbyggede komponenter:

atomer

Tekst

Tekstatomet har et fast sæt størrelser. Disse størrelser er forskellige afhængigt af den underliggende app-platform. Vi kan også videregive en farve til dette tekstatom.

 førstefødt eksempel 
Tekst (Android)

Ikon

Ikonatomet er bygget oven på reaktivt native-vektor-ikoner Ionicons-klassen. Ionicons leveres med to forskellige gengivelser af et ikon til både Android og iOS. Denne klasse gengiver ikonet i henhold til den underliggende platform.

Ikon (Android)

Knap

Knapatomet kan gengives på flere måder. Det accepterer kun tekster, ikoner og billeder som underordnede elementer, der skal vises. Det har 3 forskellige størrelser samt 4 forskellige tags, der gengiver knappen i mange kombinationer.

Knapper (Android)

Input

Inputatomet er en stylet reaktionskritisk TextInput. Det viser en farvet ramme til brugeren, hvis TextInput er i fokus. OnChangeText-metoden er obligatorisk.

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

Dette understøtter også indikering af en fejl for brugeren. For at bruge denne funktion skal vi oprette en valideringsmetode. Denne metode skal returnere en boolsk afhængig af gyldigheden af ​​den indtastede tekst. Et sådant scenario er at kontrollere, om en e-mail-adresse følger det konventionelle format. Denne metode er den, der er bestået i egenskaben isValid.

checkInputValidity = (tekst) => {
  const regex = /^\w+(??\.-???\w+)*@\w+(??\.-???\w+)*(\.\w{2,3})+$/;
  return regex.test (tekst);
}
...
Inputvalidering (Android)

textarea

TextArea-atomet er en stylet reaktionskritisk TextInput. Det viser en farvet ramme til brugeren, hvis TextInput er i fokus. Det øges også i højden med flere data indtastet.