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:

Ukrainian (українська мова) translation by Andy Yur (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.