Введение
Когда дело доходит до стилизации, React Native находится в довольно хорошем положении. Встроенный подход StyleSheet позволяет легко отделять стили вне JSX.
Но может быть сложно поддерживать стили в некоторых внешних местах, чтобы использовать их повторно. Другой проблемой является управление правильными соглашениями об именовании во всей кодовой базе. Эти проблемы можно решить с помощью Tailwind в React Native.
Tailwind CSS полностью меняет общепринятый подход к структурированию CSS. Изучая хорошие практики работы с кодом, разработчики быстро понимают важность разделения проблем и разделения HTML и CSS на два файла. Утилитарно-первый CSS выглядит совершенно иначе.
Подход с использованием класса utility-first
В React Native первые классы применяют определенные свойства CSS к элементу через свойство class или style. Предыдущий подход заключался в применении объекта style к элементу в строке или ссылке на ключи объекта StyleSheet с применением пользовательских имен.
Подход с использованием первого класса позволяет просто добавить имя класса к элементу без необходимости написания пользовательских стилей. Решение о реализации цветов, типографики и структуры, а также о предоставлении значимого имени каждому стилизованному элементу уже принято.
Tailwind предоставляет вам значения по умолчанию, основанные на надежной системе дизайна, что приводит к согласованности во всей кодовой базе. Поначалу кривая обучения может показаться крутой, но разработчик, владеющий этим типом стилизации, способен работать быстрее и более унифицированно. Кроме того, когда команда использует ограниченный набор опций, легче принять нового разработчика и поддерживать последовательность в подходе к стилизации.
И наконец, поскольку таблицы стилей используются повторно, кодовая база перестает расти, а значит, ее легче поддерживать.
Рассмотрение встроенных стилей
Когда дело доходит до смешивания кода с классами Tailwind, один из недостатков заключается в том, что наш код может быстро стать многословным. Обычно мы любой ценой избегаем встроенных стилей, потому что они негативно влияют на читабельность кода и могут ухудшить общую производительность. В сообществе разработчиков высказывались предположения, что подход StyleSheet более производителен, чем инлайн-стили, поскольку он посылает через мост сразу весь объект. Более подробная информация об этом содержится в исходном коде React Native.
Использование Tailwind в React Native
Хотя существует несколько пакетов Tailwind, хорошо подходящих для React Native, я решил использовать tailwind-react-native-classnames, а не tailwind-rn. tailwind- react-native-classnames основан на Classnames, утилите JavaScript, которая используется для улучшения кода Tailwind в Интернете, и поэтому должен быть более знаком разработчикам, использующим Tailwind CSS.
Вы можете использовать различные библиотеки по своему усмотрению, но, на мой взгляд, подход с использованием функции шаблона с метками более визуально привлекателен, чем стили, передаваемые в массив, как в react-native-tailwindcss. Вы также можете просто импортировать компоненты React Native из библиотеки react-native-tailwind и передавать классы в свойство className.
Существует два подхода к применению классов Tailwind к элементу с помощью библиотеки tailwind-react-native-classnames. Основной использует функцию ES6 tagged template, которая просто обертывает имена классов в обратные символы, как в элементе View ниже. Второй подход, использующий пакет Classnames, позволяет объединять классы и обрабатывать более сложные случаи. Обратите внимание на это в элементе Text ниже:
import tw from 'tailwind-react-native-classnames';<
const MyComponent = () => (
<View style={tw`bg-blue-100`}>
<Text style={tw.style('text-md', invalid && 'text-red-500')}>Hello</Text>
</View>
);
Классы, специфичные для React Native
У нас есть два класса React Native для использования специфических для платформы стилей, которые можно безопасно использовать с функцией шаблона tagged:
tw`ios:pt-4 android:pt-2`;
Имена классов Tailwind
Если вы посмотрите на меню в левой части главной страницы Tailwind, то увидите несколько разделов. Только некоторые из них имеют отношение к React Native, но если вы уже знаете, как стилизовать компоненты в React Native, вы быстро поймете, что можно использовать. Наиболее интересными для чтения являются следующие разделы:
- Макет: работа с такими элементами, как размер и положение
- Flexbox: позиционирование элементов с помощью Flexbox
- Spacing: классы для отступов и полей
- Sizing: классы ширины и размера
- Типографика: все, что связано со шрифтами, расстояниями между буквами и текстом.
- Фоны: классы, такие как цвет фона, изображение и непрозрачность фона
- Границы: классы радиуса, ширины и цвета.
Есть также раздел «Эффекты», где можно найти непрозрачность, но также можно использовать классы. Используйте тень в tailwind-react-native-classnames, который находится в части Box Shadow этого раздела.
Я также нашел эту шпаргалку очень полезной. При попытке задать значения можно проверить, правильно ли задан код для атрибутов элемента. Например, при задании ширины элемента можно использовать имя класса w- и задать число w-40, чтобы получить 160px.
Пример с использованием подхода стилей:
const ListItem = ({
uri,
selected = false,
text=''
}) => {
return (
<View style={[styles2.container, { ...(!selected && { backgroundColor: '#FFFFFF'})}]}>
<View style={styles2.logoBackground}>
<Image
style={styles2.logo}
source={ uri }
/>
</View>
<Text style={[styles2.text, { ...(!selected && { color: 'black'})}]}>{ text }</Text>
<TouchableOpacity style={styles2.button}>
<Text style={styles2.buttonText}>Details</Text>
</TouchableOpacity>
</View>
)
}
const styles2 = StyleSheet.create({
container: {
height: 256,
width: 160,
backgroundColor: 'rgba(59,130,246,1)',
borderRadius: 12,
padding: 15,
margin: 5,
alignItems: 'center',
justifyContent: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 3,
},
shadowOpacity: 0.27,
shadowRadius: 4.65,
elevation: 6,
},
logoBackground:{
width: 112,
height: 112,
borderRadius: 55,
backgroundColor: '#E4F0FE'
},
logo: {
width: 110,
height: 110,
borderRadius: 55
},
text: {
color: 'white',
fontSize: 18,
fontWeight: 'bold',
marginVertical: 10
},
button: {
height: 40,
width:'100%',
backgroundColor: 'white',
borderRadius: 20,
alignItems: 'center',
justifyContent: 'center',
borderWidth: 1,
borderColor: 'rgba(59,130,246,1)'
},
buttonText: {
color: 'rgba(59,130,246,1)',
fontSize: 17,
fontWeight: 'bold'
}
});
Пример с использованием подхода Tailwind CSS:
import React from 'react';
import { Text, View, TouchableOpacity, Image } from 'react-native';
import tw from 'tailwind-react-native-classnames';
export const ListItemTW = ({
uri,
selected = false,
text=''
}) => (
<View style={tw.style(
'h-64 w-40 bg-blue-500 rounded-xl p-4 m-1 items-center justify-center shadow-lg',
!selected && 'bg-white'
)}>
<View style={tw`w-28 h-28 rounded-full bg-indigo-50`}>
<Image
style={tw`w-28 h-28 rounded-full`}
source={ uri }
/>
</View>
<Text style={tw.style(
'text-white text-lg font-bold my-4',
!selected && 'text-black'
)}>
{ text }
</Text>
<TouchableOpacity
style={
tw`h-10 w-full bg-white rounded-full items-center justify-center border border-blue-500`
}
>
<Text style={tw`text-lg text-blue-500 font-bold`}>
Details
</Text>
</TouchableOpacity>
</View>
)
Итак, в чем же разница? Обратите внимание, что компонент Tailwind имеет 36 строк по сравнению с обычным компонентом с StyleSheet, который имеет 76 строк. Самым большим недостатком является наличие нескольких длинных строк кода. Две из них даже многострочные из-за использования tw.style от Classname для объединения классов с условно добавленными стилями.
Использование предопределенных стилей имеет свои плюсы и минусы. Как уже упоминалось, преимущества включают в себя более быстрое время разработки и простоту обслуживания. Самым большим недостатком является то, что если вы используете какое-то необычное значение, например, размер или цвет, которые не включены в стандартные значения, вам придется настраивать стили. Я думаю, что самым простым подходом будет передача объекта стиля в tw.style, который должен быть распознан без проблем.
Резюме
Использование Tailwind CSS в вашем проекте обеспечивает унификацию всей кодовой базы. Вместо того чтобы давать собственные имена стилям в StyleSheet, вы можете применять имена классов из предопределенного списка, который хорошо известен многим разработчикам.
Кроме того, повышается скорость разработки, поскольку проще стилизовать компоненты и оценивать, какие стили применяются к тем или иным элементам. Этот подход также имеет свои недостатки, например, делает некоторые компоненты слишком многословными. Я считаю, что эти проблемы можно решить, экспортируя некоторые из более длинных, многократно используемых частей как стилизованные компоненты или экспортируя их во внешний файл, но вам решать, какой подход лучше для вашего проекта.
Спасибо, что дочитали до конца.
Надеюсь, этот пост был полезен для улучшения вашего путешествия разработчика!
Первоначально опубликовано на: https://blogs.appymango.com/blogs/62f87dcd6769db1f12095542