Ускоренная стилизация компонентов React Native с помощью NativeWind

TailWind CSS для React Native

Введение

NativeWind - это библиотека пользовательского интерфейса, основанная на Tailwind CSS и специально разработанная для использования в приложениях React Native. С помощью NativeWind мы можем легко создавать и оформлять компоненты приложения, используя ряд предоставляемых компонентов стилизации.

Tailwind CSS - это CSS-фреймворк, ориентированный на утилиты, который позволяет нам разрабатывать пользовательские стили путем комбинирования предопределенных классов. Интегрируя Tailwind CSS с NativeWind, мы можем быстро и легко создавать и адаптировать пользовательские стили в приложениях React Native.

Как работает NativeWind

React Native не имеет встроенного CSS-движка, поэтому NativeWind необходимо преобразовать вывод CSS в объекты StyleSheet. NativeWind использует Tailwind для генерации CSS, который затем компилируется в объекты NativeWindStyleObjects. Эти объекты будут переданы в функцию NativeWindStyleSheet.create, которая действует как обертка для функции StyleSheet.create.

Используя NativeWind, мы можем применять стили, определенные Tailwind, к своим компонентам приложения, что приводит к созданию более чистого и удобного в обслуживании кода. Кроме того, мы можем использовать способность NativeWindStyleSheet кэшировать таблицу стилей, что позволяет повысить общую производительность приложений React Native.

Пример использования

<Text className = "text-black" />;

NativeWindStyleSheet.create({
  "text-black": {
    color: "#000",
  },
});

NativeWindStyleSheet.create аналогичен StyleSheet.create, за исключением того, что NativeWindStyleSheet.create не нужно присваивать переменной, достаточно вызвать функцию, и стиль можно применить непосредственно к компоненту, вставив имя стиля в атрибут className.

NativeWind также предоставляет встроенные стили и блоки, которые можно использовать, такие как margins, padding и многие другие.

<Text className = "text-[12px] text-black font-bold" />;

Но не все встроенные CSS Tailwind совместимы с NativeWind, поэтому вам нужно сначала убедиться в совместимости через сайт https://www.nativewind.dev/ .

Запуск NativeWind

Чтобы начать использовать NativeWind, добавьте пакеты nativewind и tailwindcss в проект, выполнив команду

//yarn
yarn add nativewind
yarn add --dev tailwindcss

//npm
npm install nativewind
npm install --save-dev tailwindcss

Tailwind Setup

Создайте файл tailwind.config.js в корне проекта и заполните его путями всех папок, содержащих компоненты ui

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/ui/module/**/*.{js,ts,jsx,tsx}',
    './src/ui/shared/**/*.{js,ts,jsx,tsx}',
  ],
};

Настройте Babel

Мы будем использовать Babel для компиляции Tailwind CSS, чтобы мы могли использовать атрибут className для всех компонентов. Поэтому нам нужно добавить "nativewind/babel" в файл babel.config.js в корне проекта.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['nativewind/babel'],
};

Настройка для проекта Typescript

Чтобы избежать предупреждения от Typescript, создайте файл app.d.ts в корневом проекте и заполните его словами

/// <reference types = "nativewind/types" />

Этот простой прием заключается в том, чтобы включить типы из NativeWind в наш проект TypeScript.

Теперь NativeWind готов к использованию в вашем проекте React Native.

Бонус

Чтобы вызвать предложения по стилизации Tailwind CSS в VScode, вы можете использовать расширение Tailwind CSS IntelliSense, установите расширение, нажав Ctrl+p, и введите команду ниже в появившуюся текстовую область, не забудьте перезапустить VScode перед использованием.

ext install bradlc.vscode-tailwindcss

Заключение

NativeWind - это библиотека пользовательского интерфейса на основе Tailwind CSS для React Native, которая может ускорить процесс создания стиля для компонентов React Native. NativeWind использует css из Tailwind для компиляции в StyleSheet.

DOT Indonesia - это быстрорастущая технологическая компания в области разработки веб-сайтов, мобильных устройств и блокчейна. Мы ищем высокомотивированных, независимых, умных и гибких людей, готовых оказать большое влияние на мир. Заинтересованы в том, чтобы присоединиться к нам? Заходите на сайт karir DOT Indonesia и найдите позицию, которая вам подходит. До встречи!