Най-добри практики за създаване на React Native приложения - Част 1

Изображение 1: Абстрактно изображение с лого на React

Ако сте нов в света на React Native, има някои клопки, които вероятно искате да избегнете, докато в някои други случаи ще трябва да направите избор предварително, може би без да знаете колко са важни.

По-долу съставих списък с най-добри практики от моя личен опит, който се надявам да ви бъде полезен :-)

Използвайте Expo-Kit само ако знаете какво точно правите

Expo е безплатна и с отворен код верига от инструменти за React Native. Това е може би най-добрият комплект за приложения на React Native, но той идва с ограничения.

Използвайте Expo:

  • Ако искате бърза площадка, а не да изграждате хранилището на приложението си. Просто създайте ново приложение с помощта на пакета за създаване-реагиране-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). Типични примери за това са цветовият модул (съдържа всички цветове на приложението) и модулът utils (съдържа полезни функции, които се използват повторно).

услуги - Това са функциите, които обвиват API повикванията.

i18n - Това са низовете за превод за потребители от различен език и език

Всички приложения изискват някакъв тип конфигурация, затова обикновено създавам файл, наречен config.js и го поставям там. Ако конфигурационният файл достигне много редове, можем да създадем конфигурационна папка и да разделим конфигурацията във файлове.

Ако имате библиотека за държавен мениджър, ще ви трябват и папки за неговите структури. В случая на Redux се използват още 2 папки, една за действия и друга за редуктори. Ако не използвате външен пакет и предпочитате да използвате React's Context API, ще създадете свои собствени доставчици, които могат да бъдат поставени или в папка с модули, или в нова папка, наречена доставчици.

Изберете навигационна библиотека според вашите нужди от самото начало

За съжаление, RN все още не е предоставил солидно решение или дори заместител на стария компонент на Navigator, така че сега се фокусираме върху решенията на общността. Така че, ако сте на път да започнете проект, искате да знаете коя библиотека за навигация да използвате и дали тя ще бъде подходящата за вас.

Като цяло има два типа библиотеки за навигация. Навигаторите на JavaScript и навигаторите на Native. Те са написани на JavaScript, докато родните са написани като собствени модули на съответната платформа (Android, iOS) и се мостират към JavaScript модули, за да бъдат извикани в кода. Първите са много по-лесни за настройка, докато вторите са много по-ефективни. Прекарайте времето, за да разберете кой от тях имате нужда и след това изберете един от многото там.

В тази статия Спенсър Карли свърши страхотна работа, като разработи текущите избори за навигация в React Native world, които предлагам да прочетете. Доминиращите опции обаче са React Navigation като JavaScript решение и React Native Navigation като Native решение.

Използвайте CSS-в-JS обвивна библиотека за удобство

В React Native, CSS е написан на JavaScript. Това е нещо, за което нямаме избор. Лично вместо да използвам StyleSheet.create метода и кода CSS като чист JavaScript, предпочитам да използвам библиотеката на Styled Components. Стилизираните компоненти правят писането на CSS отново да се чувства интуитивно и JSX да изглежда по-семантично.

Наскоро написах статия за това, защо предпочитам да използвам Styled Components в приложенията React Native, така че можете да потърсите там за повече подробности.

Определете рано как искате приложението ви да „мащабира“ на различни устройства и размери на екрана

Вероятно е, че разработвате приложение за повече от един размер и размер на екрана. Сега тук има две възможности как да подходите към вашия дизайн / разработка.

Можете да изберете да имате различен UI / UX в зависимост от размера на екрана. Това вероятно е най-добрият вариант за повечето видове приложения, но изисква много усилия, тъй като има няколко екрана, които трябва да бъдат проектирани и внедрени. Размерът на екраните може да бъде идентифициран чрез API на Dimensions. Като алтернатива можете да използвате пакет от трети страни, който предоставя някои помощни програми извън кутията, като например React Native Responsive UI.

Или можете да изберете да имате същия UI / UX, който ще се мащабира пропорционално за всички размери на екрана. Това е най-добрият вариант, когато например разработвате игра. Отново можете да използвате пакет от трети страни, за да постигнете това като React Native Responsive Screen.

Отказ от отговорност: Аз съм производителят на пакета React Native Responsive Screen.

Подхождайте към анимациите внимателно

Анимациите са много важни за мобилните приложения, но производителността на React Native все още не е най-добрата.

За да се предпазите от предоставяне на лоши резултати, винаги е необходимо да тествате анимации в устройството - емулаторът не предоставя правилна обратна връзка. Вие също трябва да използвате опората useNativeDriver (със стойност, зададена на true), където можете, защото това ще ви помогне да постигнете по-добри резултати.

За повече съвети как да постигнете по-добри резултати, погледнете тази моя предишна статия.

Имайте предвид също ...

  1. React Native няма DOM елементи. Вместо това имаме работа с естествени елементи.
  2. Всичко за CSS:
  • Не всички свойства се поддържат; поне още не. Проверете документацията за повече информация: Преглед на реквизити за стил, Реквизити за стил на изображение, Реквизити за стил на текст
  • Свойствата на стенограмите не работят добре, така че винаги предпочитайте конкретните (т.е. margin-bottom, margin-top, margin-left, margin-right вместо margin)
  • Не всички свойства поддържат процентни стойности. Да спомена няколко: марж, широчина на границата и радиус на границата. И ако някой се опита да зададе процентна стойност, RN или ще я игнорира напълно, или приложението ще се срине.
  • RN осигурява гъвкава поддръжка извън кутията. Научете го и използвайте, когато можете. Най-добрият ви съюзник в CSS!

Какво мислиш?

Какво мислите за тази статия? Какви други най-добри практики имате предвид? Предложете своята гледна точка и идеи в секцията за коментари по-долу.

Ако ви хареса тази статия, не се колебайте да натиснете този бутон p, за да помогнете на другите да го намерят.

За мен

Здравей, аз съм Тасос; софтуерен инженер, който обича уеб и в момента работи много с React Native и React. Аз съм съосновател на софтуерната агенция Coded Lines, където предприемаме проекти за мобилни и уеб приложения от край до край с акцент върху маркетинга в приложенията. Ако звучи това, което търсите, свържете се с мен тук: tasos.maroudas@codedlines.com. Благодаря за спирането от :)

___________________________________________________________________

Благодаря

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