Един първи поглед към новата компонентна рамка на React Native на firstBorn

първороден е React Native UI Component Framework, който следва методологията за дизайн Atomic Design от Брад Фрост.

Версия 1.0.0 беше наскоро публикувана като npm модул на 1 април (въпреки това, това не е шега ...).

В тази статия ще видим демонстрация на съществуващите компоненти, предлагани от първородни.

Методиката за проектиране

Методологията на Atomic Design следва принципа, че потребителските интерфейси могат да бъдат деконструирани до 5 различни фази.

Съгласно тази методология на проектиране, фазите са описани, както следва:

  • Atoms: Основните, самостоятелни елементи, като полета Text, Icons, Buttons или TextInput.
  • Молекули: Комбинация от различни атоми, които заедно имат по-добра оперативна стойност. Например TextInput с етикет Text, за да обясни съдържанието или да покаже грешка във въведените данни.
  • Организми: комбинация от различни молекули, функциониращи заедно, за да образуват сложни структури. Например, форма на много молекули TextInput.
  • Шаблон: Комбинация от различни организми, които формират основата на страницата. Това включва подредбата и контекста на тези организми.
  • Страница: Всички горепосочени съвместни действия в един реален случай създават страница. Това е и реалното изпълнение на шаблона.

Приготвяме се да започнем

Нека първо създадем ново приложение React Native с помощта на CLI:

реагира-нативен init firstBornExample

След като се създаде, се преместете в папката на приложението:

cd firstBornExample

За да добавите първородни в приложението, инсталирайте го така:

npm i --save @ 99xt / първороден

първородният има две други зависимости, които ще трябва да инсталираме сами.

npm i --съхранявам създавам-реагираме клас реагираме-нативен-икони-вектор-икони

След това ще трябва да следваме това ръководство, за да настроим икони за реакция-нативен-вектор за приложението.

клас-create-react няма допълнителни стъпки за настройка.

И ние сме добре да отидем!

употреба

За да импортирате компонентите, операторът ще изглежда така:

import {<име на компонента>} от '@ 99xt / първороден'

Модулът се предлага със следните вградени компоненти:

Атомите

Текст

Текстовият атом има фиксиран набор от размери. Тези размери се различават в зависимост от основната платформа за приложения. Можем също да предадем цвят на този атом на Text.

 пример за първородни 
Текст (Android)

икона

Атомът на Icon е изграден върху класа на Ionicons от реакция-native-vector-icons. Ionicons се предлагат с две различни предавания на една икона както за Android, така и за iOS. Този клас ще изобрази иконата според базисната платформа.

<Име на иконата = "сърце" цвят = "червено" />
Икона (Android)

бутон

Атома на Бутон може да бъде изобразен по много начини. Той приема само текстове, икони и изображения като деца, които се показват. Той има 3 различни размера, както и 4 различни маркера, които ще визуализират бутона в много комбинации.

Бутони (Android)

Вход

Входният атом е стилизирано вграден в реакцията TextInput. Той показва цветна рамка на потребителя, ако TextInput е на фокус. Методът onChangeText е задължителен.

...
handleTextChange = (текст) => {
  this.setState ({текст: текст})
}
Въвеждане (Android)

Това също поддържа показване на грешка за потребителя. За да използваме тази функция, ще трябва да създадем метод за валидиране. Този метод трябва да върне булева информация в зависимост от валидността на въведения текст. Един такъв сценарий е проверка дали имейл адрес следва конвенционалния формат. Този метод е този, който се предава в свойството isValid.

checkInputValidity = (текст) => {
  const regex = /^\w+( evidence\.-Sense?\w+)*@\w+( evidence\.-Sense?\w+)*(\.\w{2,3})+$/;
  върнете regex.test (текст);
}
...
Валидиране на входа (Android)

текстово поле

Атома TextArea е стилизирано вграден в реакцията TextInput. Той показва цветна рамка на потребителя, ако TextInput е на фокус. Той също така се увеличава на височина с въведени повече данни.