- PVSM.RU - https://www.pvsm.ru -
Добрый день. Сегодня делимся с вами переводом статьи, перевод которой был подготовлен специально для первого запуска курса «ReactJS/React Native-разработчик» [1]. Приятного прочтения.
Ниже я составил список лучших практических советов из своего личного опыта, которые, надеюсь, окажутся для вас полезными :)
Expo [2] — это бесплатный инструмент с открытым исходным кодом для React Native. Вполне возможно, что это лучший набор инструментов для создания приложений на React Native, однако и у него есть свои ограничения.
Используйте Expo:
Не используйте Expo:
В целом я считаю, что Expo – это отличный инструмент, и я сам использую Expo Snack [5] для обеспечения совместного доступа к коду React Native. Однако на данный момент он может быть полезен только для создания определенных типов приложений.
Организация приложения на React Native ничем не отличается от организации приложения на React. Поэтому если вы знакомы с этим, то просто придерживайтесь той же логики. Однако, если это не так, то вам пригодится логика, изложенная ниже:
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, вы можете прочитать его статью [6] по этой теме. Самый популярные решения сейчас – это React Navigation [7], в качестве решения на JavaScript, и React Native Navigation [8], как Native-решение.
В React Native CSS написан на JavaScript. Здесь у нас нет выбора. Лично я вместо того, чтобы использовать метод StyleSheet.create [9] и код CSS на чистом JavaScript, использую библиотеку Styled Components [10]. Styled Components позволяют снова писать CSS понятно и делают JSX более семантическим.
Недавно я написал статью о том, почему я предпочитаю использовать Styled Components в приложениях на React Native [11], вы можете прочитать ее, чтобы получше разобраться в теме.
Скорее всего, вы разрабатываете приложение для более чем одного устройства и размера экрана. Сейчас есть два подхода к дизайну и разработке приложения.
Вы можете сделать выбор в пользу различного UX/UI в зависимости от размера экрана. Для большинства типов приложений это, вероятно, лучший вариант, однако он требует большого количества усилий, потому что нужно придумывать и реализовывать несколько вариантов экранов. Размер экранов можно определить с помощью Dimensions API [12]. С другой стороны, вы можете использовать сторонний пакет, который «из коробки» предоставляет некоторые инструменты, такие как React Native Responsive UI [13].
Или же вы можете использовать один и тот же UI/UX, который будет масштабироваться пропорционально для всех размеров экрана. Это наилучший вариант, если, к примеру, вы разрабатываете игру. Опять же, вы можете использовать сторонний пакет, например, React Native Responsive Screen [14].
Дисклеймер: я создатель пакета React Native Responsive Screen [14].
Анимация крайне важна для мобильных приложений, но производительность React Native оставляет желать лучшего.
Чтобы защититься от ошибок, необходимо тестировать анимацию на устройстве, поскольку эмулятор не обеспечивает правильную обратную связь. Также вам нужно использовать useNativeDriver
(со значением true) везде, где возможно, поскольку это поможет достичь лучшей производительности.
Если вы хотите получить больше советов о том, как достичь лучшей производительности, взгляните на мою предыдущую статью [15].
На этом все. Узнать подробнее о курсе можно тут [1].
Автор: Дмитрий
Источник [19]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/blog-kompanii-otus-onlajn-obrazovanie/329547
Ссылки в тексте:
[1] «ReactJS/React Native-разработчик»: https://otus.pw/jboT/
[2] Expo : https://expo.io/
[3] create-react-native-app: https://github.com/react-community/create-react-native-app
[4] Expo-Kit: https://docs.expo.io/versions/v30.0.0/expokit/eject/
[5] Expo Snack: https://snack.expo.io/
[6] статью: https://medium.com/handlebar-labs/navigating-navigation-in-react-native-26c7e4690f94
[7] React Navigation: https://github.com/react-navigation/react-navigation
[8] React Native Navigation: https://github.com/wix/react-native-navigation/tree/v2
[9] StyleSheet.create: https://facebook.github.io/react-native/docs/stylesheet
[10] Styled Components: https://www.styled-components.com/
[11] React Native: https://medium.com/building-with-react-native/why-i-like-using-styled-components-in-react-native-apps-1x10-6f98a46efdf9
[12] Dimensions API: https://facebook.github.io/react-native/docs/dimensions
[13] React Native Responsive UI: https://www.npmjs.com/package/react-native-responsive-ui
[14] React Native Responsive Screen: https://www.npmjs.com/package/react-native-responsive-screen
[15] статью: https://medium.com/building-with-react-native/animations-in-react-native-how-to-achieve-great-performance-and-tips-1x04-44fd43996428
[16] View Style: https://facebook.github.io/react-native/docs/view-style-props
[17] Image Style: https://facebook.github.io/react-native/docs/image-style-props
[18] Text Style: https://facebook.github.io/react-native/docs/text-style-props
[19] Источник: https://habr.com/ru/post/466777/?utm_source=habrahabr&utm_medium=rss&utm_campaign=466777
Нажмите здесь для печати.