Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. React Native
Code

Начало работы с шаблонами React Native

by
Difficulty:BeginnerLength:LongLanguages:

Russian (Pусский) translation by Marat Amerov (you can also view the original English article)

Разработка приложений React Native с нуля часто является громоздким процессом, особенно частью дизайна, потому что вам нужно планировать разработку как на устройства Android, так и на iOS. Не только это, вы также должны убедиться, что ваше приложение выглядит красиво на разных размерах экрана.

Вот почему нужны шаблоны. Они предоставляют для вас первоначальный дизайн, так что ваше приложение выглядит красиво с минимальными усилиями с вашей стороны. Есть несколько таких шаблонов в CodeCanyon, в маркете для шаблонов и плагинов. Там вы можете найти различные типы шаблонов, ориентированных на определенный тип приложения, которое вы хотите создать.

В этом уроке мы рассмотрим, как использовать шаблон BeoStore. Как следует из названия, BeoStore - это шаблон React Native приложения для электронной коммерции.

Получение шаблона с маркетплейса

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

  • Полная интеграция с WooCommerce: если вы используете веб-сайт WooCommerce, приложение может отображать те же продукты, что и на вашем существующем веб-сайте.
  • Поддержка как iOS, так и Android: приложение работает и отлично выглядит на платформах Android и iOS.
  • Социальные логины: клиенты могут войти в систему, используя свою учетную запись Facebook или Google.
  • Легкая настройка: все разбито на компоненты. Это гарантирует, что вы можете легко настроить шаблон на основе вашего бренда.
  • Push-уведомления: это автоматически уведомляет ваших клиентов, когда обновляется статус их заказа. Вы также можете отправлять push-уведомления для рекламных акций. Push-уведомления реализованы с помощью Firebase.
  • Многоязыковая поддержка: из коробки вы получаете английский как основной язык. Вьетнамский существует как второй вариант, но вы также можете добавить свой собственный язык.
  • Безопасная интеграция платежей: платежи осуществляются с помощью PayPal.

Если у вас еще нет учетной записи Envato, вы можете зарегистрироваться здесь. После этого войдите в свою новую учетную запись. Затем вы можете вернуться на страницу BeoStore и нажать кнопку Buy Now.

Настройка проекта

После того как вы приобрели шаблон, вы получите ссылку для скачивания файла архива шаблона. Извлеките его, и вы получите папку CodeCanyon, содержащую MStore 2.2.

MStore 2.2 - это каталог для проекта шаблона. Идем дальше и открываем новое окно терминала внутри этого каталога и выполняем следующую команду:

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

Как только это будет сделано, есть дополнительный шаг, если вы хотите версию для iOS-устройств. Перейдите в папку iOS и выполните следующее:

Затем, для Android, подключите мобильное устройство к компьютеру и выполните:

В этом списке перечислены все устройства Android, подключенные к вашему компьютеру. Если это первый раз, когда вы подключаете устройство, вы должны получить запрос с просьбой разрешить компьютеру отладку по USB. Просто нажмите yes, как только вы получите это приглашение.

Теперь вы можете запустить приложение на своем Android-устройстве:

Для iOS:

Если вы не обнаружили никаких ошибок, вы  получите приветствие на следующей странице:

MStore Template Home page

Чтобы дать вам представление о различных страницах, доступных в шаблоне, вот еще несколько скриншотов:

MStore Template Cart
MStore Template Checkout
MStore Template Login
MStore Template Product Page

Поиск и устранение неисправностей

В этом разделе я составил список общих ошибок настройки проекта и их решений.

Не запускается сервер разработки

Если сервер разработки не запускался автоматически, когда вы запускали react-native run-android или react-native run-ios, вы можете вручную запустить его, выполнив:

Долгое время загрузки наблюдателя

Если вы получите ошибку, аналогичную следующей:

Это связано с тем, что работает существующий экземпляр Watchman. Это компонент сервера разработки React Native. Вы можете решить эту ошибку и закрыть Watchman, выполнив следующие команды:

Не удалось запустить ADB Reverse

Если вы получаете следующую ошибку:

Это означает, что ваше Android-устройство работает с версией ниже 5.0 (Lollipop). На самом деле это не ошибка. Это просто означает, что ваше Android-устройство не поддерживает adb reverse, которое используется для подключения сервера разработки к вашему устройству через USB-отладку. Если это не доступно, React Native возвращается к отладке с помощью Wi-Fi. Вы можете найти дополнительную информацию об этом здесь: Запуск на устройстве.

Что-то еще может привести к сбою вашей сборки. Вы можете прокручивать терминал, чтобы увидеть, есть ли какие-либо ошибки, которые произошли до этого.

Не удается найти переменную _fbBatchedBridge

Если вы получаете следующую ошибку и сервер разработки работает в режиме Wi-Fi, это означает, что вы не настроили IP-адрес вашего компьютера на своем Android устройстве. (Обычно это только устройство Android под версией 5.0).

Вы можете выполнить следующее, чтобы увидеть параметры разработчика React Native на вашем устройстве:

Выберите Dev Settings в появившемся меню. В разделе Debugging, нажмите на Debug server host & port for device. Введите внутренний IP-адрес, назначенный домашним маршрутизатором, а также порт, в котором работает сервер разработки, и нажмите OK:

Вернитесь на главный экран приложения и снова введите adb shell input keyevent 82. На этот раз выберите Reload, чтобы перезагрузить приложение.

Не удалось найти Firebase, приложение или GMS Play Services

Если вы получаете ошибки «не удалось найти», это означает, что вы не установили соответствующий пакет с помощью Android SDK Manager.

Вот пакеты, которые необходимо установить:

  • Репозиторий поддержки Android
  • Библиотека поддержки Android
  • Сервисы Google Play
  • Репозиторий Google

Обязательно обновите существующие пакеты, если есть доступное обновление.

Другие проблемы

Если ваша проблема не связана ни с одним из вышеперечисленных, вы можете попробовать следующее:

  • Ознакомьтесь с документацией по устранению неполадок.
  • Ознакомьтесь с комментариями к шаблону. Вы можете найти ошибку, которую вы получаете. Попытайтесь обобщить и укоротить сообщение об ошибке, не пытайтесь найти полное сообщение об ошибке. Если вы не можете найти ошибку, вы можете попробовать задать свой вопрос в комментариях. Служба поддержки обычно отвечает быстро.
  • Попробуйте найти ошибку в Google. Даже если результаты, которые вы найдете, не связаны с использованием шаблона, они дадут вам представление о том, как решить проблему.
  • Поищите на StackOverflow или задайте новый вопрос. Обязательно укажите все необходимые сведения (например, сообщение об ошибке, сделанные шаги). Вот хорошая статья о том, как задавать вопросы на StackOverflow.

Настройка шаблона

Хорошим местом для начала изучения того, как работать с шаблоном, является его документация:

  • Макет проекта: показывает, где искать разные файлы в шаблоне и для чего они используются.
  • Миграция WooCommerce: показывает, как вы можете подключить свой существующий веб-сайт WooCommerce к приложению. Подключение приложения к WooCommerce означает, что он сможет получать все категории продуктов и продукты в вашем WooCommerce магазине.
  • Миграция сервисов: показывает, как настроить имя приложения, Firebase (для push-уведомлений) и социальные логины.
  • Персонализация: показывает, как настроить язык и темы.

Обязательно изнакомьтесь с ними! Я не буду повторять то, что упоминалось в документации. Вместо этого то, что мы собираемся делать в этом разделе, - это фактически настроить шаблон, чтобы он выглядел так, как мы хотим.

Большинство настроек конфигурации проекта хранятся в файле app/Constants.js. Вот несколько примеров, которые вы можете изменить в этом файле:

Интеграция WooCommerce: URL-адрес магазина WooCommerce, используемого приложением. По умолчанию используется mstore.io.

Социальные логины: это реализовано с использованием Auth0, платформы аутентификации. По умолчанию шаблон поддерживает только Google и Facebook. Но вы должны иметь возможность добавлять любые службы, поддерживаемые Auth0.

Иконки: вы можете использовать любую иконку из Fontawesome, но вы должны добавить префикс именем ios-.

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

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

Эти изображения хранятся в каталоге app/images, их можно просто заменить, если вы не хотите хранить старые изображения.

  • Вы также можете изменить параметры PayPal из этого файла. Обязательно создайте собственную учетную запись разработчика PayPal для получения идентификатора clientID и secretKey. Не забудьте обновить sandBoxMode на false, когда вы развертываете свое приложение для продакшена, потому что по умолчанию он использует режим песочницы, так что фактические деньги не будут потрачены на транзакции.
  • Чтобы настроить отдельные страницы, вам нужно перейти в каталог app/containers. Здесь вы найдете файлы для каждой страницы. Например, если вы хотите настроить домашнюю страницу, перейдите в папку home и откройте файл index.js. После открытия вы увидите, что страница использует компонент <ImageCard> для отображения каждой категории продукта. Поэтому, если вы хотите добавить общий стиль для компонента <ImageCard>, вам необходимо обновить файл app/Components/ImageCard/index.js. В противном случае вы можете просто обновить стили внутри самой страницы:

Заключение

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

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

Скачайте шаблон сейчас, или если вы хотите узнать больше об этом, вы можете посмотреть документацию здесь. Вы также можете найти еще много шаблонов приложений React Native на CodeCanyon.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.