Esimene ülevaade firstBornist, React Native'i uuest komponentide raamistikust

esmasündinud on React Native UI Component Framework, mis järgib Brad Frosti kavandatud metoodikat Atomic Design.

Versioon 1.0.0 avaldati hiljuti 1. aprillil npm-moodulina (see pole siiski mingi nali).

Selles artiklis näeme esmasündinute pakutavate olemasolevate komponentide demo.

Kujundamise metoodika

Aatomikujunduse metoodika järgib põhimõtet, et kasutajaliideseid saab dekonstrueerida 5 erinevasse faasi.

Selle projekteerimismetoodika kohaselt kirjeldatakse etappe järgmiselt:

  • Aatomid: põhilised eraldiseisvad elemendid, näiteks tekst, ikoonid, nupud või tekstisisestuskastid.
  • Molekulid: Erinevate aatomite kombinatsioon, millel on koos parem tööväärtus. Näiteks teksti sisend tekstiga, et selgitada sisu või kuvada sisestatud andmetes viga.
  • Organismid: Erinevate molekulide kombinatsioon, mis toimivad koos, moodustades keerukaid struktuure. Näiteks paljude TextInput-molekulide vorm.
  • Mall: Erinevate organismide kombinatsioon, mis moodustavad lehe aluse. See hõlmab nende organismide paigutust ja konteksti.
  • Leht: kõik ülaltoodud toimimine koos ühe reaalse elu juhtumiga loob lehe. See on ka malli tegelik rakendamine.

Alustamine

Kõigepealt looge CLI abil uus rakendus React Native:

reagect-native init firstBornExample

Kui see on loodud, liikuge rakenduse kausta:

cd firstBornExample

Rakendusse esmasündinute lisamiseks installige see järgmiselt:

npm i - salvestatud @ 99xt / esmasündinu

esmasündinul on veel kaks sõltuvust, mille peame ise paigaldama.

npm i - salvestage loo-reageeri-klassi reageeri-natiiv-vektor-ikoonid

Seejärel peame järgima seda juhendit, et seadistada rakendusele reaalajas natiiv-vektor-ikoonid.

luua-reageerida-klassil pole täiendavaid seadistamise samme.

Ja meil on hea minna!

Kasutamine

Komponentide importimiseks näeb väljavõte välja järgmine:

impordi {} kaustast @ 99xt / esmasündinud

Moodul sisaldab järgmisi sisseehitatud komponente:

Aatomid

Tekst

Teksti aatomil on fikseeritud suuruste komplekt. Need suurused erinevad olenevalt kasutatavast rakenduse platvormist. Sellele teksti aatomile võime anda ka värvi.

 esmasündinu näide 
Tekst (Android)

Ikoon

Ikooni aatom on üles ehitatud reageerivate natiivsete vektorite ikoonide ioonide klassi peale. Ioonidel on kaks erinevat ühe ikooni ülekandmist nii Androidi kui ka iOS-i jaoks. See klass muudab ikooni vastavalt alusplatvormile.

Ikoon (Android)

Nupp

Nööbi aatomit saab renderdada mitmel viisil. See aktsepteerib kuvatavate lapsartiklitena ainult tekste, ikoone ja pilte. Sellel on 3 erinevat suurust, samuti 4 erinevat silti, mis muudavad nupu paljudes kombinatsioonides.

Nupud (Android)

Sisend

Sisendi aatom on stiilis reageeriv natiivne tekstisisend. See näitab kasutajale värvilist äärist, kui TextInput on fookuses. OnChangeText-meetod on kohustuslik.

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

See toetab ka veale kasutajale viitamist. Selle funktsiooni kasutamiseks peame looma valideerimismeetodi. See meetod peaks tagastama tõeväärtuse sõltuvalt sisestatud teksti kehtivusest. Üks selline stsenaarium on kontrollida, kas e-posti aadress vastab tavapärasele vormingule. See meetod on isValid atribuudis läbitud.

checkInputValidity = (tekst) => {
  const regex = /^\w+([\.-←?\w+)*@\w+(\\\\\\\\\\\\{2,3})+$/;
  tagasi regex.test (tekst);
}
...
Sisendi valideerimine (Android)

Tekstiala

TextArea aatom on stiilis reageeriv natiivne tekstisisestus. See näitab kasutajale värvilist äärist, kui TextInput on fookuses. Samuti suureneb kõrgus, kui sisestatakse rohkem andmeid.