React Native е JavaScript рамка, която ви позволява да създавате междуплатформени мобилни приложения, които се чувстват наистина естествени и работят гладко на iOS и Android. React Native произлиза от React, който предлага модел за изграждане на уеб и мобилни потребителски интерфейси по декларативен, ефективен и гъвкав начин.

И двете библиотеки с отворен код се поддържат от Facebook и общност от независими разработчици. React и React Native са успешно приети и се използват активно от редица корпорации като Airbnb, Buffer, Bleacher Report, Feedly, HelloSign, Imgur и Netflix.

За разлика от други решения за разработка на различни платформи (Cordova, Ionic или Titanium, например), които използват уеб изгледи за графичния интерфейс, React Native използва собствените си API за рендиране в Objective-C (iOS) или Java (Android), така че приложението ви рендира използване на собствени изгледи. Това позволява на разработчиците да създават приятни междуплатформени изживявания, без да губят никакво качество в производителността на потребителския интерфейс.

React Native прави лозунга на Java „пиши веднъж, изпълнявай навсякъде“ реалност, с изключение на факта, че се използва JavaScript.

Вече експериментираме с React Native за известно време; тези експерименти са довели до редица интересни „компоненти“. Този път обаче решихме да създадем нещо наистина специално и полезно...

Проектът на шаблона

За да оптимизираме нашите процеси на разработка и да предоставим на клиентите си висококачествени продукти, искахме да създадем стабилно шаблонно приложение, което да работи правилно и на двете платформи — Android и iOS — и което може да се използва като основа за нашите бъдещи проекти. Както може би се досещате, използвахме React Native, за да го оживим.

Нашият React Native Template Project съдържа потребителски потоци, които са общи за почти всички приложения. Тези потоци включват:

  • Влизам
  • Списък с артикули
  • Подробности за артикула
  • Излез от профила си

Проектът вече е наличен в GitHub, така че можете лесно да го проверите.

Тази статия не е подробен урок за това как да внедрите тези потоци в React Native. Напротив, тази статия разкрива основите на React Native — ще разгледаме някои редовни модели, както и полезни JavaScript библиотеки, които могат да се използват за създаване на React Native приложение.

База знания React Native

  • Компоненти

Ако не сте запознати с React Native, ще ви трябват основни познания, за да преминете през останалата част от статията. Този раздел също така ще ви даде известна представа за често срещаните модели на разработка и причините, поради които ги използвахме в нашия процес на разработка. Нека започнем с основите — React Components, концепция, използвана и в React Native.

Обект React.Component е най-малката атомна единица на графичен интерфейс. Компонентът приема параметри (наречени „реквизити“) и връща йерархията на изгледа на дисплея чрез метода за изобразяване.

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

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

  • Жизненият цикъл на компонента

Всеки компонент има жизнен цикъл и състояние. Всеки път, когато те се променят, се извиква методът Render.

Трябва да контролираме модифицирането на нашите данни, за да предотвратим ненужно изобразяване на потребителския интерфейс. За да се справим с това, избрахме архитектурата Redux.

  • Библиотеката Redux

В предишния раздел обяснихме, че когато създавате приложение с помощта на React, е важно данните да се поддържат в последователно състояние. Redux ни помага да направим това.

Състоянието на потребителския интерфейс е сложно – трябва да управляваме активни маршрути, избрани раздели, въртящи се бутони, контроли за пагиниране и т.н.

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

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

  • Библиотеката на сагата

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

За да оптимизираме този процес, можем да използваме междинен софтуер, посредник между две събития: изпращането на действие и получаването на това действие от редуктора. Всъщност междинният софтуер всъщност е функция, която приема store като аргумент, връща функция, която приема nextфункцията като аргумент и след това връща друга функция, която приема action като аргумент.

const someMiddleware = store => next => action => { … }

Следващата функция играе решаваща роля. Извикваме тази функция, когато нашият мидълуер приключи със задачата, която сме му възложили. Тази функция изпраща нашите действия към нашия редуктор или друг междинен софтуер. Като такива можем да извършваме асинхронни операции вътре в междинния софтуер.

Избрахме библиотеката Redux-Saga, която ни позволява да създаваме такъв междинен софтуер и предоставя полезни функции за лесно боравене с Redux.

Redux-Saga предоставя функцията на междинния софтуер, която е внедрена като Функция за генериране (това е концепция на JavaScript, която цели да направи асинхронните задачи синхронни и последователни).

Както виждаме, използвайки ключовата дума yield (използвана в Generators) и някои функции от библиотеката Redux-Saga, като take, put и call, можем да прихващаме действия от компоненти, да изпращаме заявки до бекенда и да правим процесът на синхронно и последователно изпращане на действия.

  • Неизменната библиотека

Redux използва редукторни функции за извършване на промени в рамките на store, така че когато редукторна функция хване някакво действие, тя създава нов обект, който държи ново състояние. Защо този обект трябва да е нов? Тъй като по този начин можем да сравним препратки към два различни обекта (нов обект и стар обект); освен това е много по-просто от сравняването на съдържанието на обекта.

Най-малкото трябва да създадем нов обект с помощта на оператора Spread:

Решихме да използваме библиотеката immutable.js, защото тя гарантира неизменност и изпълнява голяма част от тежката работа зад кулисите, за да оптимизира производителността и потреблението на памет. Нашата редукторна функция изглежда така:

  • Елементи на потребителския интерфейс, специфични за платформата

Що се отнася до разработването на собствен потребителски интерфейс, трябва да се придържаме стриктно към правилата на собствената платформа. С други думи, не трябва да има разлика между потребителски интерфейс, създаден на роден език, и потребителски интерфейс, създаден с помощта на React Native.

React Native има много компоненти, които можете да използвате за създаване на страхотни потребителски интерфейси. Тези компоненти от своя страна поддържат много стилови параметри, които ни позволяват да персонализираме външния вид и поведението на потребителския интерфейс. Въпреки това, тези компоненти обикновено не са достатъчни за създаване на стабилен потребителски интерфейс.

За да коригираме тази липса на естествени елементи, използвахме библиотеката Native-Base, която съдържа много специфични за платформата компоненти.

Библиотеката Native-Base ни позволява да използваме един компонент и за двете платформи без допълнителни настройки.

Можем да използваме и силата на контейнера Flexbox, който е ефективен и гъвкав инструмент за поставяне на UI елементи. Това е приложимо както за стандартните UI елементи на React Native, така и за елементите, предоставени от Native-Base.

Какво друго може да направи нашият шаблон?

Искахме да създадем проект, който покрива повечето случаи на употреба. Съществуват обаче и системни потоци, които обикновено се случват зад кулисите.

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

Проучихме купища JavaScript библиотеки с отворен код, за да намерим най-ефективното решение за този проект, всички от които споменахме в тази статия.

Нашата цел беше да създадем шаблон, който поддържа нашите най-често използвани потоци. В крайна сметка получихме стабилно приложение както за Android, така и за iOS.

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

Нашият проект е безплатен за достъп в GitHub и се надяваме, че ще ви бъде полезен. Разбира се, ние ще подобрим и актуализираме нашия шаблон и винаги се радваме да чуем всякакви предложения или коментари от други разработчици.

Тази публикация първоначално беше публикувана на Yalantis website.