Стиль React Native с адаптивными медиа-запросами, математическими операциями, модулями rem, псевдоклассами и многим другим!
Как разработчик React (Native) я не люблю писать слишком много CSS, хотя мне нравится создавать красивые интерфейсы. Недавно я начал новый проект Expo по созданию кроссплатформенного приложения, думая о библиотеках, которые я хотел бы использовать, я думал об использовании Emotion со стилизованной системой.
Emotion - это библиотека CSS-in-JS, как и Styled Components, предназначенная для высокопроизводительной композиции стилей, а Styled System позволяет использовать свойства стиля для быстрой разработки пользовательского интерфейса.
Я обнаружил, что, поскольку React Native не поддерживает Media Queries, адаптивные функции Styled System не будут работать с нативными, и мне лично эта функция очень нравится.
В поисках решения я нашел пакет под названием React Native Extended Stylesheet, библиотеку, которая добавляет дополнительные функции CSS в React Native, такие как медиа-запросы, математические операции, единицы Rem, псевдоклассы и многое другое!
Я нашел способ объединить Emotion с этим пакетом для поддержки этих расширенных стилевых функций с помощью этой библиотеки CSS-in-JS, я упаковал их вместе с адаптивной оболочкой компонента в пакет.
Emotion Native Extended - Github
Улучшенная поддержка стилей для Emotion (React Native): медиа-запросы, относительные единицы, проценты, операции и многое другое…
На GitHub есть пример этого пакета, написанный с использованием Expo для Интернета, Android и iOS.
Хотите узнать больше о свойствах стиля CSS-in-JS и Styled System? Продолжить чтение…
Что такое CSS-in-JS / Emotion / Styled Components?
Библиотеки CSS-in-JS, такие как Emotion и Styled Components, позволяют использовать стили CSS в файлах React. Вот краткий пример:
import styled from 'emotion-native-extended';const Box = styled.View` padding: 8px; display: flex; align-items: center;justify-content: center;`; const HelloWorld = () => (<Box>Hello World</Box>); export default Component;
Вместо того, чтобы писать объекты стилей или использовать StyleSheet.create (), вы можете определять свои компоненты, такие как файлы CSS, в файлах React.
Используя ThemeProvider, вы можете передать свойство темы всем стилизованным компонентам, например, я могу изменить цвет фона этого блока, который мы создали, на цвет нашей основной темы.
import styled from 'emotion-native-extended';const theme = { colors: { primary: '#03a87c', } }; const Box = styled.View` padding: 16px; background-color: ${({ theme }) => theme.colors?.primary || 'red'}; `; <ThemeProvider theme={theme}> <Box>Hi</Box> </ThemeProvider>
Теперь давайте поговорим о том, как Стилизованная система может сделать вашу жизнь еще проще благодаря стилизации и адаптивным макетам.
Что такое стилизованная система?
Styled System - хорошее дополнение к экосистеме CSS-in-JS, как они сами описывают это на своем веб-сайте:
Styled System - это набор служебных функций, которые добавляют свойства стиля к вашим компонентам React и позволяют управлять стилями на основе глобального объекта темы с типографскими масштабами, цветами и свойствами макета.
Чтобы добавить свойства стиля к вашим компонентам реакции, вы можете импортировать эти служебные функции, вот пример определения нашего расширенного компонента бокса с примером использования.
import styled from 'emotion-native-extended';
import { space, layout, color } from 'styled-system';
const Box = styled.div`
${space}
${layout}
${color}
`;
export default Box;Пространство, макет и цвет - это группы свойств, которые вы добавляете, в данном случае все свойства интервалов, такие как поля и отступы, все свойства макета, такие как ширина и высота, и все свойства цвета, а также все свойства цвета, такие как цвет и backgroundColor.
Теперь вместо добавления CSS к компоненту мы можем динамически использовать свойства, добавлять стили к нашему компоненту коробки, а также включать стили для точек останова, здесь снова используется наш компонент Box.
<Box color='white' backgroundColor='primary' padding={[2, 4]}>
Hello World, I'm a responsive View component with my theme's primary color as background, white text and on mobile a padding of 8px and all the above breakpoints a padding of 32px!
</Box>
Давайте объясним свойство padding, поскольку я определил это значение как массив целых чисел, массив представляет точки останова, а целые числа представляют индекс массива в нашем свойстве космической темы, по умолчанию эти значения точки останова и интервалов установлены в теме:
// theme.js
export default {
space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
breakpoints: ['40em', '52em', '64em'],
};Точки останова отображаются как медиа-запросы минимальной ширины сначала для мобильных устройств.
Это означает, что в массиве, который мы установили как заполнение, 2 относится к заполнению 8 пикселей и точке останова с минимальной шириной 40 мкм. 4 относится к отступу 32px и контрольной точке минимальной ширины 52em.
Довольно аккуратно, правда?
Подводя итог всему этому
По умолчанию React Native не поддерживает некоторые функции CSS, такие как запросы мультимедиа и вычисления, но с помощью расширенной таблицы стилей React Native вы можете их использовать. Я создал пакет под названием Emotion Native Extended, который позволяет вам использовать Emotion (библиотеку CSS-in-JS) вместе с расширенными таблицами стилей для поддержки большего количества функций CSS.
Я сделал это, чтобы полностью поддержать Styled System for React Native в проекте, над которым я работаю. Это мой предпочтительный способ работы, так как я избегаю написания большого количества компонентов оболочки и могу сохранить свой код красивым и чистым.
Ресурсы
- Emotion Native Extended - улучшенная поддержка стилей для Emotion Native: медиа-запросы, относительные единицы, проценты, операции и многое другое…
- Emotion - библиотека CSS-in-JS, предназначенная для высокопроизводительной композиции стилей
- React Native Extended Stylesheet - Выпадающая замена React Native StyleSheet на медиа-запросы, относительные единицы, проценты, математические операции, масштабирование и многое другое!
- Стильная система - стили для быстрой разработки пользовательского интерфейса
T Спасибо за чтение! Не стесняйтесь оставлять любые вопросы в комментариях ниже! Если вам понравилась эта статья, пожалуйста, оставьте несколько аплодисментов и подпишитесь на меня здесь в среде и других социальных сетях, я буду публиковать сообщения о React (Native), TypeScript, Node и многом другом!
