Лучшие практики React Native (часть 1)
1. Используйте дизайн-систему
Без последовательной укладки трудно добиться наилучшего результата. Дизайн-система - это набор правил и принципов, которые устанавливают основу того, как приложение должно выглядеть и работать. Вам нужно иметь в виду 4 вещи, работая с вашей дизайн-системой.
- Интервал: при работе с кроссплатформенным приложением размеры экрана могут различаться для разных компонентов, присутствующих на экране, но убедитесь, что расстояние между ними одинаковое, чтобы они выглядели согласованно.
- Цвет. Выбор правильных цветов - это не только самое важное, но и то, как вы их используете. Отличным решением является использование цветовых палитр, где вы можете давать названия своим цветам в соответствии с предпочтительными соглашениями об именах, что увеличивает общий рабочий процесс.
Всегда называйте цвета так, чтобы вам не приходилось думать о том, как они должны выглядеть в вашем приложении, называйте цвета более определенным образом, чтобы вы могли быстрее принимать решения.
Например, «Основной» как основной цвет в приложении, «Опасно» как цвет, который будет использоваться в случае опасности. значки или в любом другом месте, где вы используете красный цвет.
- Типография. Мы часто забываем о том, как шрифты меняют внешний вид нашего приложения в результатах. Лучше придерживаться ограниченного набора шрифтов, семейств, толщины и размеров, чтобы добиться приятного согласованного вида. .
2. Свойства адаптивного стиля
В веб-приложениях потребность в адаптивном дизайне очевидна там, где размеры экрана могут варьироваться от небольшого мобильного устройства до широкоэкранного настольного устройства. Но в React Native, где целью являются только мобильные устройства, он может не работать с устройством того же размера, но разница в размерах экрана уже достаточно велика, что затрудняет поиск того одного размера, который подходит все для стилизации приложения.
- Для работы с адаптивным дизайном вы можете определить некоторые точки останова, классифицируя различные экранные устройства.
Например:
- С этими точками останова все, что меньше 321 пикселей в ширину, должно попадать в категорию меньшего мобильного устройства, а ниже 768 - обычное мобильное устройство и все, что шире этого планшет.
3. Используйте TypeScript
TypeScript и React - идеальное сочетание, особенно если вы работаете в Visual Studio Code. Преимущество, которое вы получаете при использовании TypeScript, заключается в том, что вместо того, чтобы полагаться на проверку PropTyes React, которая происходит только тогда, когда компонент отображается во время выполнения, TypeScript позволяет вам проверять любые ошибки в вашем проекте. Кроме того, вы можете определить типы свойств, чтобы принимать только значения, доступные в теме, и с этим ваш редактор также автоматически заполнит допустимые значения для вас.
4. Ресурсы статических изображений
Всегда управляйте своими ресурсами статических изображений правильно, в противном случае ваше приложение будет использовать много времени для работы с событием статических файлов, когда это не требуется. Чтобы добавить статическое изображение в свое приложение, вы должны сделать это таким образом, чтобы требуемое имя изображения определялось статически.
Например,
5. Используйте стили, специфичные для платформы
React Native предлагает встроенный API для написания кода для конкретной платформы, без API платформы у вас будет много разных стилей для разных платформ (Android и iOS) , чтобы организовать эти стили, вы можете использовать модуль Platform для таблиц стилей. Вы можете использовать Platform.OS для автоматического определения ОС и последующего применения правильных стилей.
Например,
6. Создайте псевдонимы.
Создание псевдонимов - лучший способ избавиться от проблемы с вложенным импортом, например ActiveButton из ‘../../Components/Buttons’. Вы можете использовать babel-plugin-module-resolver для создания таких псевдонимов.
7. Всегда назначайте уникальный ключ каждому элементу
В React или React native назначение уникального ключа может решить многие проблемы, которые затрудняют работу с приложениями, содержащими такие компоненты, как Списки.
Например,
