Первый взгляд на firstBorn, новый компонентный каркас React Native

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

Версия 1.0.0 была недавно опубликована как модуль npm 1 апреля (хотя это не шутка ...).

В этой статье мы увидим демонстрацию существующих компонентов, предлагаемых первенцами.

Методология проектирования

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

Согласно этой методологии проектирования этапы описываются следующим образом:

  • Атомы: основные, автономные элементы, такие как текст, значки, кнопки или поля TextInput.
  • Молекулы: комбинация различных атомов, которые вместе имеют лучшую эксплуатационную ценность. Например, TextInput с текстовой меткой для объяснения содержимого или отображения ошибки во введенных данных.
  • Организмы: комбинация различных молекул, функционирующих вместе, чтобы сформировать сложные структуры. Например, форма многих молекул TextInput.
  • Шаблон: комбинация различных организмов, которые составляют основу страницы. Это включает в себя расположение и контекст этих организмов.
  • Страница: все вышеперечисленное, работающее вместе в одном реальном экземпляре, дает начало странице. Это также фактическая реализация шаблона.

Начиная

Давайте сначала создадим новое приложение React Native, используя CLI:

Реактивный род init firstBornExample

Как только он будет создан, перейдите в папку приложения:

cd firstBornExample

Чтобы добавить первенца в приложение, установите его так:

Npm я - сохранить @ 99xt / первенец

у первенца есть две другие зависимости, которые нам нужно будет установить самим.

Npm я - сохранить создать-реагировать-класс реагировать-родной-векторные иконки

Затем нам нужно будет следовать этому руководству, чтобы настроить реакцию-собственные-векторные иконки для приложения.

create-реагировать-класс не имеет дополнительных шагов настройки.

И нам пора!

использование

Чтобы импортировать компоненты, оператор будет выглядеть так:

import {<имя компонента>} из '@ 99xt / first-born'

Модуль поставляется со следующими встроенными компонентами:

атомы

Текст

Атом Text имеет фиксированный набор размеров. Эти размеры различаются в зависимости от базовой платформы приложения. Мы также можем передать цвет этому текстовому атому.

 пример первенца 
Текст (Android)

Икона

Атом Icon построен поверх класса Ionicons Reaction-native-vector-icons. Ionicons поставляются с двумя разными версиями одной иконки для Android и iOS. Этот класс будет отображать значок в соответствии с базовой платформой.

Значок (Android)

кнопка

Атом Button можно отобразить несколькими способами. Он принимает только тексты, значки и изображения в качестве дочерних элементов для отображения. Он имеет 3 разных размера, а также 4 разных тега, которые будут отображать кнопку во многих комбинациях.

Кнопки (Android)

вход

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

...
handleTextChange = (text) => {
  this.setState ({text: text})
}
Ввод (Android)

Это также поддерживает указание ошибки пользователю. Чтобы использовать эту функцию, нам нужно создать метод проверки. Этот метод должен возвращать логическое значение в зависимости от правильности введенного текста. Одним из таких сценариев является проверка соответствия адреса электронной почты общепринятому формату. Этот метод передается в свойстве isValid.

checkInputValidity = (text) => {
  const regex = /^\w+([~
  возврат regex.test (текст);
}
...
Проверка ввода (Android)

TextArea

Атом TextArea является стилизованным реагирующим родным TextInput. Он отображает цветную рамку для пользователя, если TextInput находится в фокусе. Он также увеличивается в высоту с увеличением количества вводимых данных.