Как и React Native, Draftbit Builder использует алгоритм Flexbox для определения макета экрана приложения. Алгоритм обеспечивает согласованность между экранами разных размеров. С помощью этого руководства давайте шаг за шагом научимся создавать пользовательский интерфейс с помощью конструктора приложений Draftbit, посмотрим в действии, как настраиваются компоненты макета Flexbox, а также разберемся со строительными блоками Builder. В текущем примере мы создаем экран приветствия из приложения Bookbit.

Создание приложений React Native дает возможность генерировать один исходный код для нескольких мобильных платформ, таких как iOS и Android. С годами опыт разработчиков в создании таких приложений с использованием фреймворка улучшился с появлением таких функций, как Горячая перезагрузка и Быстрое обновление. Воспользовавшись этими функциями, в Draftbit мы стремимся обеспечить лучший опыт разработки как разработчикам программного обеспечения, так и дизайнерам. Draftbit - это конструктор приложений с низким кодом, используемый для создания рабочих прототипов мобильных приложений, экспортированных в React Native.

Вот два экрана, которые мы собираемся построить в этом посте

концепции, описанные в публикации, полностью ориентированы на Draftbit Builder и заключаются в следующем:

  • Как создать новое приложение в Draftbit Builder
  • Понимание элементов для создания экрана в Draftbit Builder, например, для чего нужны левая, центральная и правая панели
  • Как переименовать компонент и изменить их порядок с помощью функции перетаскивания
  • Как использовать компонент "Фон изображения"
  • Как использовать компонент изображения
  • Добавить компонент из Bits and Blocks
  • Как настроить текстовый компонент и использовать встроенные элементы типографики Draftbit
  • Как создать кнопку со сплошным фоном
  • Как создать кнопку без полей с помощью компонента Touchable
  • Добавьте и используйте готовый шаблон экрана из Draftbit Builder.
  • Как использовать такие компоненты, как Контейнер и Значок
  • Как создавать собственные блоки из разных компонентов для их повторного использования
  • Как создать кнопку с контуром
  • Как предварительно просмотреть приложение, созданное с помощью Expo

Как создать новое приложение в Draftbit Builder

Прежде чем мы начнем, убедитесь, что вы вошли в свою учетную запись Draftbit. После входа в систему вы увидите похожий экран панели инструментов, как показано ниже:

Чтобы создать экземпляр нового приложения в Draftbit Builder, нажмите кнопку «Создать приложение» в правом верхнем углу экрана. После нажатия кнопки введите необходимые сведения о прототипе приложения в соответствии с вашими потребностями. Это четырехэтапный процесс:

  • В модальной форме введите имя прототипа приложения в поле «Имя приложения».
  • Введите «Описание приложения» для прототипа приложения и нажмите «Продолжить».
  • Выберите шаблон. Поскольку мы строим с нуля, давайте начнем с пустого приложения. Нажмите кнопку «Начать с пустого приложения» в центре нижней части модальной формы, а затем нажмите «Продолжить». В Builder доступно множество макетов для различных целей, которые вы можете выбрать.
  • Он сообщит вам, что Строитель готов, и вы можете начать, нажав кнопку «Начать строительство».

Вот обзор создания экземпляра нового приложения:

Понимание элементов для создания экрана в Draftbit Builder

Левая панель

Как только это новое приложение будет создано, Draftbit Builder приветствует вас пустым экраном с именем Blank, на котором не представлены компоненты React Native. Преимущество использования пустого экрана в том, что вы можете создать пользовательский интерфейс с нуля.

Вы увидите, что в настоящее время на боковой панели слева выбран раздел «Экраны». Каждый экран, созданный в Builder, попадает в этот раздел. Этот раздел дополнительно разделен на два подраздела или панели: Экраны и макет.

«Экраны (1)» показывает количество существующих экранов в приложении, в настоящее время один, поскольку экран только один. «Макет» - это место, где вы можете добавить компоненты React Native для настройки и структурирования пользовательского интерфейса для определенного экрана. Поскольку первый экран для нас уже создан, давайте переименуем его.

Переименовать экран

Чтобы переименовать экран в Draftbit Builder, вам необходимо выполнить следующие действия:

  • Выберите экран
  • Дважды щелкните по нему и введите название экрана.

Draftbit Builder позаботится об его автоматическом обновлении.

Чтобы убедиться, что имя экрана обновлено, вы можете нажать кнопку «Код», чтобы просмотреть код на верхней центральной панели, и там отобразится экран компонента, который мы только что переименовали.

Вот фрагмент кода для справки:

import React from 'react';
import { ScreenContainer } from '@draftbit/ui';

const WelcomeScreen = props => {
  return <ScreenContainer hasSafeArea={true} scrollable={false} />;
};

export default WelcomeScreen;

Правая панель

Первоначально Builder создает корневой компонент View (в терминах React Native) как SafeAreaView. Все остальные компоненты, которые мы создадим на этом экране, будут дочерними по отношению к этому компоненту. Если вам нужно отредактировать это значение, это делается с правой панели.

Подождите… Что такое правая панель?

Правая панель используется для настройки свойств каждого элемента макета, который представляет некоторую часть пользовательского интерфейса на экране. Он разделен на четыре вкладки:

  • Стили - это место, где выполняется определение или изменение компонента макета.
  • Конфигурации - это место, где обрабатывается конфигурация компонента макета. Например, вы можете переименовать компонент.
  • Данные - это место, где потребляются данные в реальном времени от REST API или используются для предоставления значения для такого компонента, как текст.
  • Взаимодействия - это то, где обрабатываются различные виды отношений между компонентами и экранами. Например, вы можете управлять переходом с одного экрана на другой с помощью компонента Touchable.

Мы подробно рассмотрим все эти вкладки в следующих публикациях, но в этой публикации давайте сосредоточимся на вкладках Стили и Конфигурации.

Поскольку мы хотим изменить значение SafeAreView на false:

  • Выберите экран приветствия и перейдите на вкладку «Конфигурации» на правой панели.
  • Выключите кнопку с надписью Has SafeAreaView.

Каждый раз, когда вы меняете значение по умолчанию или добавляете значение на панели «Стили» или «Конфигурации», Builder выделяет это свойство желтой точкой. Таким образом, можно легко определить, какие свойства в настоящее время используются для определенного экрана или компонента. Это похоже на написание свойств ссылки StyleSheet в React Native.

Создание первого экрана

Первый экран, который мы собираемся создать, называется экраном приветствия. Он будет иметь следующую структуру компонентов React Native Layout.

Первый компонент, который мы собираемся добавить, называется ImageBackground. Он предоставляет возможность добавления фонового изображения на экранный компонент. Чтобы добавить это:

  • Нажмите кнопку со значком плюса в Builder.
  • В разделе Биты компонентов мультимедиа щелкните компоненты Фон изображения. При добавлении изображения в качестве фонового изображения или просто для его использования в компоненте изображения всегда убедитесь, что имя загружаемого файла начинается с буквы, а не с числа.

Компоненту "Фон изображения" требуется фоновое изображение. Builder позволяет загружать собственное изображение в качестве источника для этого компонента:

  • Выберите компонент «Фон изображения» на левой панели.
  • Выберите вкладку «Данные» на правой панели.
  • Щелкните значение для Image Source.
  • В модальном окне вы можете загрузить собственное фоновое изображение, а затем выбрать его. Он будет использоваться как источник компонента «Фон изображения».

Элемент, который мы будем представлять, представляет собой контейнер, который содержит логотип, состоящий из компонента изображения, заголовка и слогана, которые оба состоят из компонента текста.

  • Нажмите кнопку со значком плюса в Builder.
  • Выберите вид и текст из Основные компоненты для добавления. Этот набор компонентов является важнейшими блоками построения экрана.
  • Выберите изображение из Медиа-компонентов для добавления. Эти компоненты помогают дополнительно определить структуру и пользовательский интерфейс экрана.

Мы хотим отображать заголовок и слоган под логотипом. Вы можете перетащить, чтобы изменить порядок компонентов для определенного экрана, как показано ниже:

Давайте изменим стили для этих компонентов.

  • Выберите «Фон изображения» и установите значение «Выровнять по центру» и «По ширине» в разделе «Элементы гибкости». Этот раздел используется для выравнивания положения компонента с помощью алгоритма Flexbox. Компонент здесь может быть либо его дочерним, либо самовыравнивающимся.
  • Затем добавьте значение 1 к параметру Размер ›Рост. Он определяет способность гибкого элемента (в данном случае компонента Image Background) при необходимости увеличиваться в зависимости от размера экрана.
  • Затем в поле Margins & Padding добавьте нижний отступ размером 40pt. Значение по умолчанию для поля или заполнения - 0pt. При необходимости значения также могут быть определены в% в Builder.

  • Выберите «Просмотр» и на вкладке «Стили» установите значение «Выровнять по центру» в разделе «Элементы Flex».
  • Затем в поле Margins & Padding добавьте нижнее поле 120.
  • Выберите изображение. На вкладке «Стили» добавьте нижнее поле 4. В разделе «Размер» добавьте ширину 120 и высоту 164.
  • Затем перейдите на вкладку «Данные» и в разделе «Источник изображения» загрузите изображение, представляющее логотип.
  • Наконец, вернитесь на левую панель, дважды щелкните компонент Image, чтобы переименовать его в Logo.

Компонент Text может использовать встроенные элементы типографии Draftbit. Эти элементы типографики состоят из шрифта и цвета. Есть предопределенные значения типографики, готовые к использованию.

  • Переименуйте первый компонент Text в Title, а второй - в Tagline.
  • Установите стили для заголовка на правой панели. Выберите шрифт Headline1. Он поставляется с настраиваемыми значениями для размера, расстояния между буквами, высоты строки и цвета.
  • Чтобы изменить цвет, выберите палитру цветов. Вы можете выбрать заранее определенные значения цвета. Для шрифта Headline1 значение цвета strong выбирается из темы по умолчанию. Вы также можете добавить собственные значения HEX или RGBA, чтобы установить цвет для свойства.
  • Перейдите на вкладку «Данные» и добавьте значение элемента «Заголовок» для представления свойства «Текст».

  • Точно так же для Tagline выберите шрифт Subtitle1.
  • Добавьте верхнее поле 4.
  • Затем добавьте текстовое значение на вкладке «Данные».

В исходном макете этого экрана, который мы создаем, есть еще один компонент View, используемый для обертывания двух кнопок. Это дочерний элемент Image Background, а не предыдущий компонент View, над которым мы работали до сих пор. Давайте создадим первую кнопку со сплошным фоном.

  • Выберите «Фон изображения», нажмите кнопку со значком «плюс», а затем нажмите «Просмотр».
  • Установите для этого горизонтальный отступ на 34.
  • Установите ширину 100%.
  • На левой панели щелкните значок кнопки «плюс», выберите «Блоки» и затем щелкните «Сплошная кнопка».
  • Измените значение свойства Text на вкладке Data на Discover Books.
  • Перейдите на вкладку «Конфигурации» и установите значение свойства «Имя компонента» для поиска книг. Это еще один способ переименовать компонент.
  • Измените значение свойства Color Override на настраиваемое шестнадцатеричное значение # 332036. Он представляет собой сплошной цвет фона компонента кнопки. После того, как вы добавите пользовательское значение для цвета, его можно будет использовать повторно, и оно будет отображаться в разделе «Последние» палитры цветов.
  • Чтобы изменить значение цвета метки этой кнопки, выберите средство выбора для свойства «Переопределение цвета метки» и измените его на предварительно определенное значение «Фон», которое имеет фактическое шестнадцатеричное значение #ffffff.
  • На вкладке «Стили» добавьте горизонтальный отступ 28 и измените значение свойства «Радиус границы» на «Кнопка».

Теперь в том же контейнере View создадим кнопку без полей с компонентами Touchable и Text.

  • Выберите родительский контейнер View, щелкните значок кнопки «плюс», чтобы добавить дочерний компонент View. Он собирается обернуть элементы кнопки без полей. На правой панели на вкладке «Стили» измените значение «Выровнять по центру».
  • Также добавьте верхнее поле 20.
  • Выберите только что добавленный View и добавьте Touchable из Inputs & Control. Компоненты этого типа используются для регистрации пользовательского ввода.
  • В стилях установите значение «Выровнять» и «Выровнять по ширине» в разделе «Элементы гибкости» по центру.
  • Также измените его размер. Добавьте ширину до 60% и минимальную высоту, представленную свойством Min H равным 42.
  • Добавьте компонент Text к этому компоненту Touchable. После этого измените его шрифт на кнопку. Затем измените цвет на средний с предопределенных значений.
  • Затем перейдите на вкладку «Конфигурации» и измените имя компонента на «Узнать больше».
  • Наконец, перейдите на вкладку Data и добавьте значение свойства Text, чтобы узнать больше.

Как добавить готовый шаблон экрана

Исходный пример приложения Bookbit состоит из шести разных экранов. Чтобы избежать повторения концепций, которые мы уже рассмотрели, давайте воспользуемся предварительно созданным шаблоном экрана, который предлагает Draftbit Builder, и, используя его, давайте рассмотрим те функции, которые мы еще не видели.

Чтобы использовать предварительно созданный экран в приложении Draftbit, начните с нажатия кнопки «Добавить» на центральной панели конструктора. Вы найдете множество готовых экранов для разных целей. Некоторые из них предназначены для общего использования, например, списки статей, формы входа и т. Д. Некоторые из них довольно специфичны, например Профиль автора из приложения Bookbit.

Давайте добавим экран с инструкциями в демонстрационное приложение:

  • Нажмите кнопку «Добавить» на центральной панели и найдите экран «Учебное пособие» в строке поиска.
  • Добавьте экран Учебный экран (Bookbit 2 из 8).
  • Вы заметите, что шаблон экрана теперь появляется на левой панели после экрана приветствия.
  • Переименуйте его в Tutorial.

Как использовать такие компоненты, как Контейнер и Значок

Взгляните на макет этого нового экрана. Он составлен так же, как экран приветствия, с использованием компонентов «Биты» и «Блок». Однако здесь используется несколько различных компонентов, таких как Icon, Container и Button Outline.

Начнем с Контейнера, который является компонентом макета и работает так же, как компонент View, но с некоторыми дополнительными свойствами.

Он используется для добавления тени к другому компоненту, например значку, отображаемому на экране. Свойство высоты в этом компоненте, которое находится на правой панели на вкладке «Конфигурации», как показано ниже, используется для управления интенсивностью падающей тени с использованием значений от 0 до 3.

На экране учебного пособия он используется для создания тени для компонента Значок, который он помещает в макет экрана. Компонент Icon находится в коллекции компонентов Basic и обычно представляет собой символ, представляющий элемент в макете экрана.

На правой панели на вкладке «Конфигурации» вы можете добавить или изменить значок по его имени, цвету и размеру.

Имя свойства определяет значок. Draftbit поддерживает различные наборы значков, такие как Ionicons, Ant Design, Material icons, Font Awesome и т. Д.

Как создавать собственные блоки и повторно использовать их

Создавая макет для разных экранов в Builder, вы часто будете повторять одни и те же шаблоны, используя один и тот же набор компонентов. Преимущество, которое дает здесь Builder, заключается в том, что они повторно используются, создавая настраиваемые блоки для набора компонентов, которые визуально похожи. Вы можете использовать эти настраиваемые блоки либо на одном экране, либо на разных, а также настраивать информацию.

Возьмем, к примеру, экран Учебного пособия. В настоящее время он отображает строки различных значков в собственном контейнере с некоторым текстом, заключенным в компонент View со свойством flex-direction, установленным на row.

Чтобы создать или сохранить настраиваемый блок:

  • Наведите указатель мыши на родительский компонент и щелкните меню с многоточием, показанное справа.
  • Затем нажмите «Сохранить настраиваемый блок» и назовите его как-нибудь полезное.

Вы можете повторно использовать этот настраиваемый блок.

  • Выберите компонент, под которым вы хотите разместить пользовательский компонент.
  • Нажмите кнопку со значком плюса и перейдите в раздел «Сохранено».
  • Выберите компонент настраиваемого блока.

  • Затем измените его свойства и содержимое, чтобы отобразить соответствующую информацию. Например, в приведенной ниже демонстрации мы размещаем его правильно, добавляя верхнее поле, затем меняем имя значка и добавляем текст для отображения.

Как создать кнопку с контуром

В Builder есть различные типы компонентов кнопок, которые в настоящее время поддерживаются. Двумя наиболее часто используемыми компонентами кнопок являются Сплошная кнопка и Контур кнопки. Ранее мы видели, как использовать и настраивать компонент Button Solid при создании экрана приветствия. Структура кнопки работает точно так же. Вы можете добавить его из панели Блоки ›Кнопки.

В отличие от компонента Button Solid, у него нет сплошного фона. На нем доступны два важных параметра конфигурации:

  • Color Override используется для установки цвета границы кнопки.
  • Label Color Override используется для установки цвета метки.

Предварительный просмотр экрана

Draftbit Builder позволяет просматривать экран двумя способами. Первый способ - использовать вкладку Preview в самом Builder с помощью Expo.

Второй способ предварительного просмотра экрана - использовать Live Preview на реальном устройстве путем сканирования QR-кода с помощью приложения Expo Go.

Вывод

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

Вот несколько ссылок, которые могут вам помочь:

💜 Мы в Draftbit любим наше сообщество и всегда открыты для ваших вопросов, отзывов и пожеланий. Вы также найдете больше ресурсов для изучения и создания с Draftbit.

Свяжитесь с нами в twitter / @ draftbit, чтобы получить дополнительные вопросы.