5 вещей, которые нужно знать при стилизации вашего приложения First React Native

Как фронтенд-разработчик, вы были знакомы со стилями и компоновкой для своих сайтов и приложений в стиле Интернета, используя старый добрый CSS и HTML. Однако, когда вы погрузитесь в свое первое приложение React Native, вы заметите, что все совсем не так - это может даже показаться немного странным. Дивы и пролеты? Ушел. Традиционный CSS? Неа. Но не паникуйте! Все будет хорошо ... потому что это всего лишь JavaScript.

1. Стилизация выполняется с помощью JavaScript.

Как современный фронтенд-разработчик, вы наверняка (э .. надеюсь) знакомы с JavaScript. Отличные новости! Это все, что вам нужно для стилизации компонентов React Native! На самом деле ваши компоненты - это, по сути, просто функции, и вы будете стилизовать их с помощью объектов JS. Хотя вы никогда не будете использовать синтаксис CSS, имена свойств стиля JS будут в основном соответствовать тому, к чему вы привыкли с CSS. Однако основное отличие состоит в том, что в JS-стиле используется верблюжья оболочка. Кроме того, некоторые компоненты не поддерживают определенные свойства стиля (например, ‹View /› не могут иметь цветовую опору).

CSS:

.bg--slate { background-color: #252525 }

JavaScript:

bgSlate: {
   backgroundColor: "#252525",
}

2. Стили привязаны к их компонентам.

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

base.js

fcWhite: { 
   color: "#FFFFFF", 
}

MyComponent.js

import base from "../base";
<Text style={base.fcWhite}>Christian Bryant</Text>
<Text style={base.fcWhite}>Loves React Native</Text>

3. Программируемый

Помните, я упоминал, что все, что вы делаете, делается на JavaScript? В этом случае вы можете в полной мере использовать преимущества языка - ваши стили полностью программируемы.

const lighten = (n) => `rgba(255,255,255,${n})`
console.log(lighten(1/2));  // rgba( 255,255,255,0.5 )

4. Меньше опций по сравнению с CSS.

Все единицы измерения указаны в пикселях.
Некоторые свойства, которые вы использовали в CSS, не существуют (например, источник преобразования)
Нет медиа-запросов (но вы можете использовать объект измерения для проверки размера области просмотра)
Нет правил отображения - все макеты построены с использованием flexbox

5. Несколько дополнительных советов

При создании стиля для приложения React Native следует иметь в виду еще несколько вещей. Во-первых, имейте базовую таблицу стилей. Для общих стилей всегда полезно иметь общую основу, с которой вы можете импортировать их в другие таблицы стилей или компоненты.

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

Наконец, сделайте ваши компоненты максимально пригодными для повторного использования. Например, предположим, что в вашем приложении есть два варианта кнопок. Один синий, а другой красный, но все остальное, например радиус, ширина и высота границы, одинаковы. Вместо того, чтобы создавать компоненты «redButton.js» и «blueButton.js», создайте компонент с одной кнопкой и просто передайте цвет в качестве опоры.

Переход от веб-стилей к React Native может показаться немного странным, но я надеюсь, что это быстрое чтение поможет вам почувствовать себя немного более комфортно и вы сможете кое-что применить к своему первому проекту. В конце концов, помните, что это всего лишь JavaScript. Если у вас есть дополнительные вопросы или отзывы, вы можете найти меня в twitter @ rvawebd00d.

5 вещей, которые нужно знать при стилизации вашего приложения First React Native