Добрый день, хабровчане. Сегодня делимся с вами переводом статьи, перевод которой был подготовлен специально для первого запуска курса «ReactJS/React Native-разработчик». Приятного прочтения.

---

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

Ниже я составил список лучших практических советов из своего личного опыта, которые, надеюсь, окажутся для вас полезными :)

Используйте Expo-Kit только если вы действительно знаете, что делаете

Expo — это бесплатный инструмент с открытым исходным кодом для React Native. Вполне возможно, что это лучший набор инструментов для создания приложений на React Native, однако и у него есть свои ограничения.

Используйте Expo:

• Если вы просто хотите создать песочницу, а не создавать репозиторий вашего приложения. Просто создайте новое приложение с помощью пакета create-react-native-app.
• Если вы провели исследование перед тем, как создавать приложение, и поняли, что все его нужды могут быть покрыты решениями, которые предлагает Expo.
• Если у вас нет компьютера с Mac OS, но вы все равно хотите создавать приложения для IPhone. Это единственная альтернатива для создания исполняемых IPA.

Не используйте Expo:

• Если вы новичок в React Native, и вы думаете, что это единственный способ создать приложение. В первую очередь, проверьте, соответствует ли он вашим требованиям.
• Если вы планируете использовать сторонние RN-пакеты с нативными пользовательскими модулями. Expo не поддерживает такой функционал, и в этом случае вам понадобится извлечь (eject) Expo-Kit. На мой взгляд, если вы изначально собираетесь извлекать какой-либо набор инструментов, не стоит его использовать вообще. Процедура извлечения усложнит создание приложения, по сравнению с тем, если бы вы вообще его не использовали.

В целом я считаю, что Expo – это отличный инструмент, и я сам использую Expo Snack для обеспечения совместного доступа к коду React Native. Однако на данный момент он может быть полезен только для создания определенных типов приложений.

Как структурировать папки и файлы вашего приложения

Организация приложения на React Native ничем не отличается от организации приложения на React. Поэтому если вы знакомы с этим, то просто придерживайтесь той же логики. Однако, если это не так, то вам пригодится логика, изложенная ниже:

• Добавьте папку в корень и назовите ее “app”;
• Создавайте папки внутри “app”:

assets – Внутри нее я располагаю до трех папок со шрифтами, иконками и изображениями.

components – Здесь вы разместите все компоненты React с общим доступом. Обычно это те компоненты, которые мы зовем «фиктивными», поскольку они не имеют логики состояния и могут быть легко переиспользованы внутри приложения.

views – Это наши экраны приложения, те, с помощью которых мы перемещаемся от одного к другому. Здесь также хранятся компоненты React, те, что мы зовем контейнерами, поскольку они хранят свое собственное состояние.

modules – Там хранятся части, которые не имеют соответствующих им view (JCX). Типичными примерами могут являться модуль colors (содержит все цвета приложения) и модуль utils (содержит служебные функции, которые можно переиспользовать).

services – Здесь лежат функции, которые оборачивают вызовы API.

i18n – Здесь хранится перевод для пользователей с различными языками и языковыми стандартами.

Все приложения требуют определенного типа конфигурации, поэтому я обычно создаю файл, который называется config.js и храню ее там. Если в файле конфигурации получается слишком много строк, можно создать отдельную папку config и разбить его на несколько файлов.

Если у вас есть библиотека управления состоянием, для ее составляющих вам тоже понадобятся папки. В случае с Redux, используются 2 и больше папок, одна для actions, а другая для reducers. Если вы не используете внешние пакеты и предпочитаете использовать React Context API, вы можете создать своих собственных провайдеров, которых можно разместить в папке modules или в новой папке providers.

Подбираем библиотеку навигации в соответствии с вашими потребностями

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

В целом существует два типа навигационных библиотек: JavaScript-навигаторы и Native-навигаторы. Первые написаны на JavaScript, тогда как Native-библиотеки написаны на нативных модулях в соответствии с платформой (Android, iOS) и соединены с модулями на JavaScript, чтобы пробрасываться в код. Первые гораздо проще настраивать, в то время как последние гораздо более эффективны. Потратьте время, чтобы понять, какой тип вам подходит больше, а затем выбирайте из множества библиотек именно этого типа.

Спенсер Карли проделал большую работу и разработал текущие варианты Navigation в мире React Native, вы можете прочитать его статью по этой теме. Самый популярные решения сейчас – это React Navigation, в качестве решения на JavaScript, и React Native Navigation, как Native-решение.

Для удобства используйте библиотеку-оболочку CSS-in-JS

В React Native CSS написан на JavaScript. Здесь у нас нет выбора. Лично я вместо того, чтобы использовать метод StyleSheet.create и код CSS на чистом JavaScript, использую библиотеку Styled Components. Styled Components позволяют снова писать CSS понятно и делают JSX более семантическим.

Недавно я написал статью о том, почему я предпочитаю использовать Styled Components в приложениях на React Native, вы можете прочитать ее, чтобы получше разобраться в теме.

Заранее решите, как вы хотите, чтобы ваше приложение масштабировалось на различных устройствах с разными размерами экрана

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

Вы можете сделать выбор в пользу различного UX/UI в зависимости от размера экрана. Для большинства типов приложений это, вероятно, лучший вариант, однако он требует большого количества усилий, потому что нужно придумывать и реализовывать несколько вариантов экранов. Размер экранов можно определить с помощью Dimensions API. С другой стороны, вы можете использовать сторонний пакет, который «из коробки» предоставляет некоторые инструменты, такие как React Native Responsive UI.

Или же вы можете использовать один и тот же UI/UX, который будет масштабироваться пропорционально для всех размеров экрана. Это наилучший вариант, если, к примеру, вы разрабатываете игру. Опять же, вы можете использовать сторонний пакет, например, React Native Responsive Screen.

Дисклеймер: я создатель пакета React Native Responsive Screen.

Подходите к анимации с осторожностью

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

Чтобы защититься от ошибок, необходимо тестировать анимацию на устройстве, поскольку эмулятор не обеспечивает правильную обратную связь. Также вам нужно использовать useNativeDriver (со значением true) везде, где возможно, поскольку это поможет достичь лучшей производительности.

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

Также помните

1. В React Native нет DOM элементов. Вместо этого мы работаем с нативными элементами.
2. О CSS:
   
   
   • Поддерживаются не все свойства, по крайней мере пока. Чтобы узнать больше, ознакомьтесь с документацией: свойства View Style, свойства Image Style, свойства Text Style.
   • Сокращенные свойства не всегда работают хорошо, поэтому лучше используйте конкретные (такие как margin-bottom, margin-top, margin-left, margin-right вместо margin).
   • Не все свойства поддерживают значения в процентах. Например следующие: margin, border-width и border-radius. Если кто-то пытается использовать процентные значения, то либо RN будет их игнорировать, либо приложение в принципе упадет.
   • RN поддерживает flex из коробки. Изучите его и используйте при случае. Это лучший союзник CSS!

На этом все. Узнать подробнее о курсе можно тут.