Найкращі практики створення програм React Native - Частина 1

Зображення 1: Абстрактне зображення з логотипом React

Якщо ви новачок у світі React Native, є певні підводні камені, яких ви, мабуть, хочете уникнути, тоді як у деяких інших випадках вам доведеться робити вибір наперед, можливо, не знаючи, наскільки вони важливі.

Нижче я склав список найкращих практик з мого особистого досвіду, який, сподіваюся, вам стане корисним :-)

Використовуйте Expo-Kit, тільки якщо ви точно знаєте, що робите

Expo - це вільна мережа інструментів з відкритим кодом для React Native. Це, мабуть, найкращий комплект для додатків React Native, але він має обмеження.

Використовуйте Expo:

  • Якщо ви хочете швидкий майданчик, а не створювати сховище додатка. Просто створіть новий додаток за допомогою програми create-react-native-app.
  • Якщо ви провели розширені дослідження програми, яку ви збираєтеся створити, і всі її вимоги можуть бути покриті пропонованими рішеннями Expo.
  • Якщо у вас немає комп'ютера Mac, ви абсолютно хочете створити додаток і для iPhone. Це єдина альтернатива для створення виконавчих IPA.

Не використовуйте Expo:

  • Якщо ви новачок у React Native і думаєте, що це "обов'язковий" шлях. Спершу перевірте, чи відповідає вашим потребам.
  • Якщо ви плануєте використовувати сторонні RN-пакети, які мають власні натурні модулі. Expo не підтримує цю функціональність, і в цьому випадку вам доведеться вийняти Expo-Kit. На мою думку, якщо ви збираєтеся вийняти будь-який комплект, не використовуйте його в першу чергу. Це, мабуть, зробить все складніше, ніж якщо ви взагалі не використовували комплект.

В цілому я думаю, що Expo - це чудовий інструмент, і я використовую Expo Snack, щоб ділитися фрагментами RN-коду. Але зараз це може допомогти лише для створення певних типів додатків.

Як структурувати папки / файли програми

Структурування програми React Native нічим не відрізняється від структурування додатка React. Тож якщо ви з цим знайомі, ви можете дотримуватися існуючої логіки. Але якщо ви цього не зробите, можливо, ви знайдете корисну запропоновану нижче логіку:

Зображення 2: Структура файлів / папок для програми React Native
  • Додайте папку в корінь під назвою "додаток"
  • Створіть папки всередині програми:

активи - тут я використовую до 3 папок: шрифти, значки та зображення

компоненти - тут ви розмістите всі свої спільні компоненти React. Зазвичай ці компоненти є тими, які ми називаємо «фіктивними», які не мають логіки стану і можуть бути легко використані в додатку.

перегляди - це наші екрани програм, ті, якими ми переходимо від одного до іншого. Це також компоненти React, але вони називаються контейнерами, оскільки вони містять власний стан.

модулі - Є фрагменти, які не мають відповідної частини перегляду (JSX). Типовими прикладами цього є модуль кольорів (містить усі кольори програми) та модуль утиліти (містить утилітні функції, які повторно використовуються).

послуги - це функції, які завершують виклики API.

i18n - це рядки перекладу для користувачів різної мови та мови

Усі програми вимагають певного типу конфігурації, тому я зазвичай створюю файл, який називається config.js, і вкладаю його туди. Якщо файл конфігурації досягає великої кількості рядків, ми можемо створити конфігураційну папку та розділити конфігурацію у файлах.

Якщо у вас є бібліотека державного менеджера, вам також знадобляться папки для її структур. У випадку Redux використовуються ще 2 папки, одна для дій та ще одна для редукторів. Якщо ви не використовуєте зовнішній пакет і вважаєте за краще використовувати API контексту React, ви створите власних провайдерів, які можуть бути розміщені або в папці модулів, або в новій папці, що називається провайдерами.

Виберіть навігаційну бібліотеку відповідно до своїх потреб з самого початку

На жаль, RN ще не запропонував надійного рішення або навіть замінив старий компонент Навігатора, тому ми зараз зосереджуємось на спільних рішеннях. Тож якщо ви збираєтеся розпочати проект, ви хочете знати, яку бібліотеку навігації використовувати та чи буде вона правильною для вас.

Загалом існує два типи навігаційних бібліотек. Навігатори JavaScript та Навігаційні навігатори. JavaScript написані на JavaScript, в той час як Native записані у якості власних модулів відповідної платформи (Android, iOS) та з'єднані з модулями JavaScript, щоб викликати їх у коді. Перші набагато легше налаштувати, тоді як другі набагато ефективніші. Витратьте час, щоб зрозуміти, який із них вам потрібен, а потім виберіть один із багатьох.

Спенсер Карлі зробив велику роботу, розробивши поточні варіанти навігації в реактивному корінному світі в цій статті, яку я пропоную вам прочитати. Домінуючими варіантами є React Navigation як рішення JavaScript та React Native Navigation як Native.

Для зручності використовуйте бібліотеку обгортки CSS-in-JS

У React Native CSS написаний на JavaScript. Це щось, про що у нас немає вибору. Особисто замість використання StyleSheet.create методу та коду CSS як чистого JavaScript, я вважаю за краще використовувати бібліотеку стильових компонентів. Стильовані компоненти змушують писати CSS знову зрозуміти інтуїтивність і зробити JSX більш семантичним.

Нещодавно я написав статтю про те, чому я вважаю за краще використовувати стилізовані компоненти в додатках React Native, тож ви можете ознайомитись із деталями там.

Вирішіть рано, як ви хочете, щоб ваш додаток "масштабував" різні пристрої та розміри екрана

Швидше за все, ви розробляєте додаток для більше одного розміру пристрою та розміру екрана. Зараз тут є два варіанти, як підійти до вашого дизайну / розробки.

Ви можете вибрати інший UI / UX залежно від розміру екрана. Це, мабуть, найкращий варіант для більшості типів додатків, але вимагає великих зусиль, оскільки для розробки та впровадження є кілька екранів. Розмір екрана можна визначити за допомогою API Dimensions. Крім того, ви можете використовувати пакет сторонніх постачальників, який надає деякі утиліти поза коробкою, такі як інтерфейс React Native Responsive.

Або ви можете вибрати той самий UI / UX, який буде пропорційно масштабуватися для всіх розмірів екрана. Це найкращий варіант, коли, наприклад, ви розробляєте гру. Знову ж таки, ви можете скористатись стороннім пакетом, щоб досягти такого, як, наприклад, екран React Native Respovable Screen.

Відмова: Я виробник пакету React Native Respovable Screen.

Підійдіть до анімації обережно

Анімації дуже важливі для мобільних додатків, але продуктивність React Native ще не найкраща.

Для того, щоб убезпечити себе від поганих результатів, вам завжди потрібно протестувати анімацію в пристрої - емулятор не забезпечує належного зворотного зв'язку. Ви також повинні використовувати реквізит useNativeDriver (зі значенням, встановленим на істинне) де завгодно, бо це допоможе вам досягти кращих показників.

Для отримання додаткових порад щодо досягнення кращих показників роботи ви ознайомтеся з цією попередньою статтею.

Майте також на увазі ...

  1. У React Native немає елементів DOM. Натомість ми маємо справу з рідними елементами.
  2. Про CSS:
  • Не всі властивості підтримуються; принаймні ще ні. Перегляньте документацію для отримання додаткової інформації: Перегляньте реквізити стилів, Реквізити стилю зображення, Реквізити стилю тексту
  • Властивості скорочень не працюють добре, тому завжди надайте перевагу конкретним (тобто, маржа-низ, маржа-верх, маргіна-ліво, маргіна-право замість поля)
  • Не всі властивості підтримують відсоткові значення. Зазначимо лише декілька: межа, ширина кордону та радіус межі. І якщо хтось спробує встановити відсоткове значення, RN або повністю його проігнорує, або програма вийде з ладу.
  • RN забезпечує гнучку підтримку поза коробкою. Вивчіть це та використовуйте, коли зможете. Це найкращий союзник CSS!

Що ти думаєш?

Що ви думаєте про цю статтю? Які ще найкращі практики ви маєте на увазі? Пропонуйте свою точку зору та ідеї в розділі коментарів нижче.

Якщо вам сподобалася ця стаття, не соромтесь натиснути цю клавішу , щоб допомогти іншим її знайти.

Про мене

Привіт, я Тасос; програмний інженер, який любить Інтернет і в даний час багато працює з React Native та React. Я є співзасновником програмного агентства Coded Lines, де ми здійснюємо комплексні мобільні та веб-проекти з акцентом на маркетинг через додаток. Якщо вам здається, що ви шукаєте, зв'яжіться зі мною тут: tasos.maroudas@codedlines.com. Дякуємо, що зупинилися :)

___________________________________________________________________

Дякую

Джордж Карбулоніс для читання доказів